雙日歷時間段選擇控件

基礎使用入門

1 引入

雙日歷時間控件需要依賴bootstrap、jQuery、moment 環境！
下載地址：http://www.daterangepicker.com

這里要強調一下：注意引入的順序，因為datepicker.js的運行依賴moment.js，所以一定要確保moment.js在datepicker.js之前引入。

2 容器元素

在html頁面中需要創建日期控件的容器元素。
一般是用input，例如：
<input id="datepicker" value=""/>
根據情況和樣式的不同有對應的寫法。

3 調用

最簡單的調用方法是：
$(“#datepicker”).daterangepicker();
當然也可以傳入參數和方法。

4 參數

這里簡單介紹幾個常用的參數。

{
   "autoApply": true,  // 選中后自動關閉控件窗口
    "locale":{
        "separator": " 至 “,  //開始時間與結束時間的連接符號
        "format": "YYYY-MM-DD”,  // 日期格式
        "daysOfWeek":["日","一","二","三","四","五","六”],  // 控件上的周的現實方式，也可設置成英文。
        "monthNames":["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月”] // 控件上的月的現實方式，也可設置成英文。
    },
    "dateLimit": {
        "days": 90  // 時間的最大選擇范圍。
    },
    singleDatePicker: true, // 變成單日歷控件
    ranges: {
       'Today': [moment(), moment()],
       'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
       'Last 7 Days': [moment().subtract(6, 'days'), moment()],
       'Last 30 Days': [moment().subtract(29, 'days'), moment()],
       'This Month': [moment().startOf('month'), moment().endOf('month')],
       'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    } // 其中moment()可以獲取到當前時間。通過subtract()方法可以從當前時間推算出你想要得到的時間。
}

除此之外，還有其它參數，詳情參見上述網站。

5 待執行函數

例如：
傳入自己封裝的函數，執行要達到的效果。

function(start, end, label) {
    
    $('#daterangepicker').html(
        start.format('YYYY-MM-DD') + ' - ' +
        end.format('YYYY-MM-DD')
    );
    $('#beginTime').val(start.format('YYYY-MM-DD'));
    $('#endTime').val(end.format('YYYY-MM-DD'));
    // console.log(
    //     'New date range selected: ' +
    //     start.format('YYYY-MM-DD') + ' to ' +
    //     end.format('YYYY-MM-DD') +
    //     ' (predefined range: ' + label + ')');
}

6 網站資源

http://www.daterangepicker.com
https://github.com/dangrossman/bootstrap-daterangepicker