雙日曆時間段選擇控件

時間 2019-11-11

標籤雙日歷時選擇控件简体版

原文原文鏈接

基礎使用入門html

1 引入

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

這裏要強調一下：注意引入的順序，由於datepicker.js的運行依賴moment.js，因此必定要確保moment.js在datepicker.js以前引入。github

2 容器元素

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

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()方法能夠從當前時間推算出你想要獲得的時間。
}

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

5 待執行函數

例如：
傳入本身封裝的函數，執行要達到的效果。orm

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 + ')');
}