Query UI DateRangePicker自定义面板个数
jQuery UI DateRangePicker 最大的特色是可以定义展示的月面板个数，可以直接选择时间范围，
还可以定义快捷日期连接，而bootstarp的Date Range Picker只能展示两个月面板，范围超过两个月的时候需要翻，
jqueryuidataRangeDemo: http://tamble.github.io/jquery-ui-daterangepicker/
bootstarpDate RangeDemo: http://www.daterangepicker.com/
依赖：
- jQuery 1.8.3+
- jQuery UI 1.9.0+ (widget factory, position utility, button, menu, datepicker)
- moment.js 2.3.0+
引入：
<link href="xxx/jquery-ui-1.12.1/jquery-ui.min.css" rel="stylesheet"> <link href="xxx/jquery-ui-daterangepicker-0.5.0/jquery.comiseo.daterangepicker.css" rel="stylesheet">
<script src="xxx/jquery-ui-1.12.1/jquery-ui.min.js"></script> <script src="xxx/moment.js"></script> <script src="xxx/jquery-ui-daterangepicker-0.5.0/jquery.comiseo.daterangepicker.js"></script>
配置的代码：
<script> var defaults = { initialText : '昨天',//默认显示 applyButtonText:"确定", cancelButtonText:"取消", clearButtonText:"", rangeSplitter:" 至 ", dateFormat: 'mm-dd',//日期格式 altFormat: 'yy-mm-dd',//Submitted date format datepickerOptions: {//所有参数http://www.css88.com/jquery-ui-api/datepicker/ minDate:-90,// maxDate: 0, monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'], dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'], dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'], dayNamesMin: ['日','一','二','三','四','五','六'], numberOfMonths : 4, onSelect: function(dateText) {//选择日期后执行的操作 } }, presetRanges: [{ text: '今日实时', dateStart: function() { return moment() }, dateEnd: function() { return moment() } }, { text: '昨天', dateStart: function() { return moment().add(-1,'days') }, dateEnd: function() { return moment().add(-1,'days') } },{ text: '前天', dateStart: function() { return moment().add(-2,'days' ) }, dateEnd: function() { return moment().add(-2,'days') } }, { text: '最近7天', dateStart: function() { return moment().add(-7,'days') }, dateEnd: function() { return moment().add(-1,'days') } }, { text: '最近15天', dateStart: function() { return moment().add(-15,'days' ) }, dateEnd: function() { return moment().add(-1,'days') } }, { text: '最近30天', dateStart: function() { return moment().add(-30,'days') }, dateEnd: function() { return moment().add( -1,'days') } } ], change:function (e) { daysChange(); }, close:function () { upSelectAUL=""; } };
id 为pastDays的input 用来初始化控件
<input id="pastDays" value='<%=pastDaysVal%>' type="hidden"/>
$(function(){ //初始日历 initRangeDate($("#pastDays")); 需要重写日期的配置只需再传递一个配置对象 var opt={ icon: "", applyButtonText:"", cancelButtonText:"", datepickerOptions: { minDate:-7, maxDate: 0, numberOfMonths : 1, onSelect: function(selectedDate) {} } } initRangeDate($('#pastDays'), opt) 这样初始化中的var options = $.extend(true,{},defaults,opt?opt:{}); 会用opt对象的属性覆盖defaults 里的默认属性
初始值的问题:在初始控件之前在 需要初始化的input里按格式设置上默认值就好
<input id="pastDays" value="{"start":"2017-06-05","end":"2017-07-11"}" style="display: none;">
实现单日期选择：本身插件选择单日期，选择一个日期—点击确定，但既然是单日期就不必点击确定按钮了，所以利用jquery ui 的datepicker 中的onSelect方法当选择的时候获得选中的值，然后赋给 input,并关闭控件
datepickerOptions: {//上面默认配置里有说明
onSelect: function(selectedDate) {
$('ID').daterangepicker("setRange", {start: moment(selectedDate, "MM-DD-YYYY").toDate()});
$('ID').daterangepicker("close");
}}