网站中难免会用到日期选择插件,常见的有jquery的,也有bootstrap的.单日历的就不说了,实例化都比较简单.今天给大家介绍一下bootstrap的双日历插件. http://www.jq22.
网站中难免会用到日期选择插件,常见的有jquery的,也有bootstrap的.单日历的就不说了,实例化都比较简单.今天给大家介绍一下bootstrap的双日历插件.
http://www.jq22.com/jquery-info1087
这是双日历插件下载地址,demo里面有介绍需要引入那些js和css文件.
1.直接进入到js实例化部分:
function timePicker(){ var option={ locale:{ fromLabel: '开始日期', toLabel: '结束日期' }, maxDate:new Date(new Date().getFullYear()+'-'+(new Date().getMonth()+1)+'-'+(new Date().getDate()+1)),//双日历允许最大的结束日期 opens:'left',//日历与输入框的对其方式,当前为右对齐 //maxDate:moment(),//设置成moment(),有一个bug,那就是不能选择今天(比如2016-7-21) //dateLimit:{//起止时间允许的范围 // days:30 //}, showDropdowns : true//这个属性可以实现下拉选择年份 }; $('#calenderAccount').daterangepicker(option); setTimeout(function () { 17 $('#calenderImg').click(function (e) { if(e.stopPropagation()){ e.stopPropagation(); }else if(e.cancelBubble){ e.cancelBubble=true } $('#calenderAccount').trigger('click') }); $('.clearInputTime').click(function () {//实现清空的功能 $('#calenderAccount').val(''); $('#startTime').val(''); $('#endTime').val(''); $('.cancelBtn ').trigger('click') }) },400);}2.由于配置参数里面并没有清空按钮,但是项目为了实现这一个功能,所以自己在源码里面添加了一行,增加了一个清空按钮:
var DRPTemplate = '<div class="daterangepicker dropdown-menu">' + '<div class="ranges">' + '<div class="range_inputs">' + '<div class="daterangepicker_start_input">' + '<label for="daterangepicker_start"></label>' + '<input class="input-mini" type="text" name="daterangepicker_start" value="" disabled="disabled" />' + '</div>' + '<div class="daterangepicker_end_input">' + '<label for="daterangepicker_end"></label>' + '<input class="input-mini" type="text" name="daterangepicker_end" value="" disabled="disabled" />' + '</div>' + '<button class="applyBtn" disabled="disabled"></button> ' + '<button class="cancelBtn btnDone"></button>' + '<button class="clearInputTime" style="float: right;margin-right: 10px">清空</button>' + '</div>' + '</div>' + '<div class="clear"></div>' + '<div class="calendar left"></div>' + '<div class="calendar right"></div>' + '</div>';最终的效果如下图:
点击上方的input框,会弹出双日历选择器,选择了日期之后,需要点击确定,输入框内才会有值,如果需要清空输入框的值,只需要再次激活日历选择器,点击清空即可
更多详细参数请参考:
http://bootstrap-datepicker.readthedocs.io/en/latest/options.html
或者参考源码: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 };
