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");
}}

 

 

 

转载于:https://www.cnblogs.com/s1956/p/7210499.html