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