一、引入文件

1、引入的css

 	<link rel="stylesheet" href="../../../lib/bootstrap/css/bootstrap-datetimepicker.min.css">

2、引入的js

<script src="../../../lib/bootstrap/js/bootstrap.min.js"></script>
<script src="../../../lib/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
<script src="../../../lib/bootstrap/js/bootstrap-datetimepicker.zh-CN.js"></script>

3、文件地址

引入的前端Html和JS下载地址

二、datetimepicker用法总结

1、format（日期时间格式）

控制日期的显示方式，属性具体说明如下:
yyyy 年，全称。如2017
yy 年，简称。只显示后面2位。如17
MM 月，全称。月份显示为英文/中文。如April/四月
M 月，简称。如Apr/四
mm 月，全称。如03
m 月，简称。如3
HH 时，全称，12小时制。前面补0，如05
H 时，简称，12小时制。前面不补0，如5
hh 时，全称，24小时制。前面补0
h 时，全称，24小时制。前面不补0
ii 分，全称，前面补0
i 分，全称，前面不补0
ss 秒，全称，前面补0
s 秒，全称，前面不补0
P 大写的P，12小时制且大写’AM’或’PM’
p 小写的p，12小时制且小写’am’或’pm’

2、weekStart 一周从哪一天开始

Integer类型
默认值：0
0（星期日）~6（星期六）

$("#lkm").datetimepicker({
        weekStart: 1
}); 

3、startDate 开始时间

Date类型
默认值：开始时间

4、endDate 结束时间

Date类型
默认值：结束时间

5、daysOfWeekDisabled 一周的周几不能选

String, Array类型
默认值：’ ', [ ]

0（星期日）~6（星期六）

$("#lkm").datetimepicker({
        daysOfWeekDisabled: '0,1,2'
});

6、autoclose 选完时间后是否自动关闭

Boolean类型
默认值：false

当选择一个日期后是否立即关闭日期选择器。

7、startView 选完时间首先显示的视图

Number, String类型
默认值：2, ‘month’

8、minView 最精确的时间

Number, String类型
默认值：0, ‘hour’

9、maxView 最高能展示的时间

Number, String类型
默认值：4, ‘decade’

10、todayBtn 当天日期按钮

Boolean, “linked”类型
默认值：false’

11、todayHighlight 当天日期高亮

Boolean类型
默认值：false

12、keyboardNavigation 方向键改变日期

Boolean类型
默认值：false

是否允许通过方向键改变日期。

13、language 语言

String类型
默认值：’en’
中文：’zh-CN’ (但需要导入bootstrap-datetimepicker.zh-CN.js。)

14、forceParse 强制解析

Boolean类型
默认值：true

强制解析成你规定的格式（format），我没有尝试过。

15、minuteStep 步进值

Number类型
默认值：5

此数值被当做步进值用于构建小时视图。就是最小的视图是每5分钟可选一次。是以分钟为单位的。

16、pickerPosition 选择框位置

String类型
默认值：’bottom-right’

还支持 : ‘bottom-left’，’top-right’，’top-left’

17、showMeridian 是否显示上下午

Boolean类型
默认值：false

在日期和小时选择界面，出现上、下午。

18、initialDate 初始化日期时间

Date or String类型
默认值：new Date()

19、remove 清除datetimepicker设置内容

$('#periodName').datetimepicker('remove');

三、年、季、月效果代码

季度思路：两个input分别获取年和季度，然后进行字符串拼接。

1、html

<div class="form-group">
	<label class="control-label">周期类型：</label>
	<div class="control-inline">
		<select class="form-control width-230" name="demoType" id="demoType">
			<option value="">请选择...</option>
			<option value="年度">年度</option>
			<option value="季度">季度</option>
			<option value="月度">月度</option>
		</select>
	</div>
</div>
<div class="form-group">
	<label class="control-label">周期：</label>
	<div class="control-inline">
		<input type="text" id="demoDate" class="form-control width-230" >
		<select class="form-control width-230" name="demoDate1" id="demoDate1" style="display:none">
			<option value="">请选择季度...</option>
			<option value="第一季度">第一季度</option>
			<option value="第二季度">第二季度</option>
			<option value="第三季度">第三季度</option>
			<option value="第四季度">第四季度</option>
		</select>		
		<select class="form-control width-230" name="demoDate2" id="demoDate2" style="display:none">
			<option value="">请选择周...</option>
		</select>					
	</div>
</div>

2、js

		$('#demoType').change(function () {
				//清除文本框内容
        		$('#demoDate').val('');
				$('#demoDate').val('');
				//清除datetimepicker设置内容
				$('#demoDate').datetimepicker('remove');
				$('#demoDate1').hide();
				var date =new Date();
        		var type=$('#demoType').val();
				if(type=='年度'){					
					$("#demoDate").datetimepicker({
					format:"yyyy",
					keyboardNavigation:true,
					initialDate: date,
					autoclose:true,
					minView:4,
					startView:4,
					language:"zh-CN"
					});
					
				}else if(type=='季度'){
					$("#demoDate1").show();										
					$("#demoDate").datetimepicker({
					format:"yyyy",
					keyboardNavigation:true,
					initialDate: date,
					autoclose:true,
					minView:4,
					startView:4,
					language:"zh-CN"
					});	
					
				}else if(type=='月度'){
					$("#demoDate").datetimepicker({
					format:"yyyy-mm",
					autoclose:true,
					minView:3,
					startView:3,
					keyboardNavigation:true,
					initialDate:date,				
					language:"zh-CN"
					});
				}else if(type=='周'){
					$("#demoDate2").show();										
					$("#demoDate").datetimepicker({
					format:"yyyy",
					keyboardNavigation:true,
					initialDate: date,
					autoclose:true,
					minView:4,
					startView:4,
					language:"zh-CN"
					});	
					
				}else{
					$("#demoDate1").hide();
					$("#demoDate2").hide();
				}
		});

四、周效果代码

var year=$("#demoDate").val();
var yy=page.logic.changeTimeFormat(year);
page.logic.getWeek(yy);

changeTimeFormat: function (str) {
  this.clock = (str + '').split(' ')[4];
  if ((str + '').indexOf('-') != -1) {
  	str = str.replace(new RegExp(/-/gm), '/');
  }
  let d = new Date(str);
  let newDateYear = d.getFullYear();
  let newDateMonth = (d.getMonth()) < 10 ? '0' + (d.getMonth()) : (d.getMonth());
  let newDateDay = d.getDate() + '' < 10 ? '0' + d.getDate() + '' : d.getDate() + '';
  return newDateYear;
},

getWeek:function(year) {
    var d = new Date(year, 0, 1);
    while (d.getDay() != 1) {
        d.setDate(d.getDate() + 1);
    }
 var to = new Date(year + 1, 0, 1);
 var i = 1;
 var html='<option value="">请选择周...</option>';
 for (var from = d; from < to;) {
	 console.log(i);
	 //将周信息赋值 
	 html+='<option value="第' + i + '周 ">第' + i + '周</option>';
	 from.setDate(from.getDate() + 6);
	    if (from < to) {
	     from.setDate(from.getDate() + 1);
	     } else {
	      to.setDate(to.getDate() - 1);
	     }
	    console.log(html);
	 	i++;
    }
    $('#demoDate2').append(html);
},

最后

以上就是聪明夕阳为你收集整理的日期选择器（年、季、月、周）展示一、引入文件二、datetimepicker用法总结三、年、季、月效果代码四、周效果代码的全部内容，希望文章能够帮你解决日期选择器（年、季、月、周）展示一、引入文件二、datetimepicker用法总结三、年、季、月效果代码四、周效果代码所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。