bootstrap 日历控件（双日历插件）

网站中难免会用到日期选择插件,常见的有jquery的,也有bootstrap的.单日历的就不说了,实例化都比较简单.今天给大家介绍一下bootstrap的双日历插件.

http://www.jq22.com/jquery-info1087这是双日历插件下载地址,demo里面有介绍需要引入那些js和css文件.

1.直接进入到js实例化部分:

 1 function timePicker{
 2     var option={
 3         locale:{
 4 fromLabel: '开始日期',
 5 toLabel: '结束日期'
 6         },
 7         maxDate:new Date(new Date.getFullYear+'-'+(new Date.getMonth+1)+'-'+(new Date.getDate+1)),//双日历允许最大的结束日期
opens:'left',//日历与输入框的对其方式,当前为右对齐 8 //maxDate:moment,//设置成moment,有一个bug,那就是不能选择今天(比如2016-7-21) 9 //dateLimit:{//起止时间允许的范围 10 // days:30 11 //}, 12 showDropdowns : true//这个属性可以实现下拉选择年份 13 }; 14 $('#calenderAccount').daterangepicker(option); 15 setTimeout(function  { 16 17 18 $('#calenderImg').click(function (e) { 19 if(e.stopPropagation){ 20 e.stopPropagation; 21 }else if(e.cancelBubble){ 22 e.cancelBubble=true 23 } 24 $('#calenderAccount').trigger('click') 25 }); 26 $('.clearInputTime').click(function  {//实现清空的功能 27 $('#calenderAccount').val(''); 28 $('#startTime').val(''); 29 $('#endTime').val(''); 30 $('.cancelBtn ').trigger('click') 31 }) 32 },400); 33 }

2.由于配置参数里面并没有清空按钮,但是项目为了实现这一个功能,所以自己在源码里面添加了一行,增加了一个清空按钮:

 1 var DRPTemplate = '<div >' +
 2 
 3 '<div >' +
 4 '<div >' +
 5 '<div >' +
 6 '<label for="daterangepicker_start"></label>' +
 7 '<input  type="text" name="daterangepicker_start" value="" disabled="disabled" />' +
 8 '</div>' +
 9 '<div >' +
10 '<label for="daterangepicker_end"></label>' +
11 '<input  type="text" name="daterangepicker_end" value="" disabled="disabled" />' +
12 '</div>' +
13 '<button  disabled="disabled"></button>&nbsp;' +
14 '<button ></button>' +
15 '<button  >清空</button>' +
16 '</div>' +
17 '</div>' +
18 '<div ></div>' +
19 '<div ></div>' +
20 '<div ></div>' +
21 '</div>';

最终的效果如下图:

点击上方的input框,会弹出双日历选择器,选择了日期之后,需要点击确定,输入框内才会有值,如果需要清空输入框的值,只需要再次激活日历选择器,点击清空即可

更多详细参数请参考:

或者参考源码:daterangepicker.js里面的下列代码:

setOptions: function(options, callback) {

 this.startDate = moment.startOf('day');
 this.endDate = moment.endOf('day');
 this.minDate = false;
 this.maxDate = false;
 this.dateLimit = false;

 this.showDropdowns = false;
 this.showWeekNumbers = false;
 this.timePicker = false;
 this.timePickerIncrement = 30;
 this.timePicker12Hour = true;
 this.singleDatePicker = false;
 this.ranges = {};

 this.opens = 'right';
 if (this.element.hasClass('pull-right'))
 this.opens = 'left';

 this.buttonClasses = ['btn', 'btn-small'];
 this.applyClass = 'btn-success';
 this.cancelClass = 'btn-default';

 this.format = 'YYYY-MM-DD';
 this.separator = ' - ';

 this.locale = {
 applyLabel: '确定',
 cancelLabel: '取消',
 fromLabel: '从',
 toLabel: '到',
 weekLabel: 'W',
 customRangeLabel: 'Custom Range',
 daysOfWeek: moment._lang._weekdaysMin.slice,
 monthNames: moment._lang._monthsShort.slice,
 firstDay: 0
 };