學習日期時間控件 daterangepicker

daterangepicker  daterangepicker 是一款日期時間控件，可選擇「年，月，日，時，分，秒」，可選擇單面板，也可選擇雙面板(起止時間)。

單面板示例：daterangepicker 單面板 codepen 在線示例

雙面板示例：daterangepicker 雙面板 codepen 在線示例

1、daterangepicker 的配置項以下：

• startDate(date/string)最初選擇的日期範圍的開始日期。若是您提供一個字符串，它必須與您的地區設置中的日期格式字符串相匹配。
• endDate(date/string)初始選定日期範圍的結束日期。

如(格式 MM/DD/YY) "startDate": "12/26/2018",  "endDate": "01/04/2018"

 

• minDate:(date/string)能夠選擇的最先日期。
• maxDate:(date/string)能夠選擇的最新日期。

如(格式 MM/DD/YY) "minDate": "12/12/2018",  "maxDate": "12/28/2018"

 

最先日期(2018年12月12日)之前的日期，和最新日期(2018年12月28日)之後的日期將不能被選擇。

• maxSpan:(object)所選開始和結束日期之間的最大跨度。選擇雙面板時有效

如 "maxSpan": { "days": 7 } 時：將跨度七天 

• showDropdowns:(true/false)顯示年和月選擇框以上的日曆跳轉到一個特定的月和年。

如："showDropdowns": true 時，年和月能夠經過下來選擇，不然只能左右切換，一月一月的增長或減小

• minYear: (number)當下拉列表設置爲true時，下拉列表中顯示的最小年份。
• maxYear: (number)下拉列表中顯示的最大年份，當下拉列表設置爲true時。
• showWeekNumbers:(真/假)在日曆上每週的開始顯示本地化的周號。

• showISOWeekNumbers(true/false)在日曆上顯示每週開始的ISO周號。

 

• timePicker:(true/false)除了日期以外，還添加了選擇時間的選擇框。

設置爲 true 就能夠選擇時間，設置爲 true 時，timePickerIncrement、timePicker24Hour、timePickerSeconds 纔有效

• timePickerIncrement:(number)時間選擇列表的增量(例如，30只容許選擇以0或30結尾的時間)。
• timePicker24Hour:(true/false)使用24小時而不是12小時，去掉AM/PM選項。
• timePickerSeconds:(true/false)在時間選擇器中顯示秒。

如："timePicker": true, "timePicker24Hour": true, "timePickerIncrement": 10, "timePickerSeconds": true

 

• ranges:(object)設置能夠從中選擇的預約義日期範圍。每一個鍵是範圍的標籤，其值是一個數組，其中兩個日期表明範圍的界限。
  
• showCustomRangeLabel: (true/false)在使用ranges選項時，在預約義範圍列表的末尾顯示「CustomRange」。噹噹前日期範圍選擇與預約義範圍之一不匹配時，將突出顯示此選項。單擊它將顯示日曆以選擇一個新範圍。
• alwaysshowcalendar: (true/false)一般，若是使用ranges選項指定預約義的日期範圍，則選擇自定義日期範圍的日曆在用戶單擊「自定義範圍」以前不會顯示。當此選項設置爲true時，將始終顯示用於選擇自定義日期範圍的日曆。
• opens:('left'/'right'/'center')選擇器是否顯示爲向左對齊、向右對齊，仍是在它所鏈接的HTML元素下居中。
• drops:('down'/'up')選擇器是否顯示在(默認)或它所附加的HTML元素之上。
• buttonClasses: (string) CSS類名將被添加到apply和cancel按鈕。
• applyButtonClasses: (string) CSS類名，只會添加到apply按鈕。
• cancelButtonClasses: (string) CSS類名，只會添加到cancel按鈕。

如："buttonClasses": "btn", "applyButtonClasses": "btn-apply", "cancelClass": "btn-cancel"

cancelBtn默認添加到關閉按鈕，applyBtn默認添加到應用按鈕

• locale: (object)容許您爲按鈕和標籤提供本地化的字符串，定製日期格式，並更改日曆的第一天。
  

如：

"locale": {
        "format": "YYYY-MM-DD hh:mm:ss",
        "applyLabel": "肯定",
        "cancelLabel": "取消",
        "daysOfWeek": ["週日", "週一", "週二", "週三", "週四", "週五", "週六"],
        "monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        "firstDay": 1
      }

格式爲 "YYYY-MM-DD hh:mm:ss"，第一天是週一，再也不是默認的週日。

• singleDatePicker:(true/false)只顯示一個日從來選擇一個日期，而不是顯示一個有兩個日曆的範圍選擇器。爲回調提供的開始和結束日期將與選擇的日期相同。

單個日期選擇仍是起止日期的雙面板選擇。

• autoApply:(true/false)隱藏apply和cancel按鈕，並在單擊兩個日期時自動應用一個新的日期範圍。
• linkedcalendar:(true/false)當啓用時，顯示的兩個日曆老是連續兩個月(即1月和2月)，當單擊日曆上方的左箭頭或右箭頭時，這兩個日曆都會提早。當禁用時，這兩個日曆能夠單獨提早並顯示任何月份/年。
• isInvalidDate:(function)在兩個日曆中每一個日期顯示以前傳遞的函數，並可能返回true或false，以指示該日期是否可供選擇。
• isCustomDate:(function)一個函數，它在兩個日曆中的每一個日期顯示以前被傳遞，而且能夠返回一個字符串或CSS類名數組來應用於該日期的日曆單元格。
• autoUpdateInput:(true/false)指示日期範圍選擇器是否應該在初始化時自動更新它所附加到的<input>元素的值，以及當所選日期發生更改時。
• parentEl: (string)jQuery選擇器的父元素，日期範圍選擇器將被添加到，若是沒有提供，這將是「body」

2、daterangepicker 的方法以下：

• setStartDate(Date or string):將日期範圍選擇器當前選擇的開始日期設置爲提供的日期
• setEndDate(Date or string):將日期範圍選擇器當前選擇的結束日期設置爲提供的日期

如：

$("#dateTime").data("daterangepicker").setStartDate("2019-01-01 00:00:00");
$("#dateTime").data("daterangepicker").setEndDate("2019-12-31 23:59:59");

方法必定要寫在配置項的後面，將得出 setStartDate屬性未定義 Uncaught TypeError: Cannot read property 'setStartDate' of undefined

在初始化時設置時間輸入域的值和 setStartDate 或 setEndDate 的值一致，以單面板爲例：

<input type="text" id="dateTime" class="form-control" placeholder="請輸入或選擇時間(YYYY-MM-DD hh:mm:ss)">

$("#dateTime").val("2019-01-01 00:00:00");
$("#dateTime").daterangepicker({
  timePicker: true,
  timePicker24Hour: true,
  timePickerSeconds: true,
  linkedCalendars: false,
  autoUpdateInput: false,
  showDropdowns: true,
  singleDatePicker: true,
  locale: {
    format: "YYYY-MM-DD hh:mm:ss",
    applyLabel: "肯定",
    cancelLabel: "取消",
    daysOfWeek: ["週日", "週一", "週二", "週三", "週四", "週五", "週六"],
    monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
    firstDay: 1
  }
}).on("apply.daterangepicker", function(ev, picker) {
  picker.element.val(dateTimeFormat(picker.startDate._d).string);
});
$("#dateTime").data("daterangepicker").setStartDate("2019-01-01 00:00:00");

 

3、daterangepicker 的事件以下：

show.daterangepicker:顯示選擇器時觸發

hide.daterangepicker:隱藏選擇器時觸發

showCalendar.daterangepicker:當日歷顯示時觸發

hideCalendar.daterangepicker:隱藏日曆時觸發

apply.daterangepicker:單擊apply按鈕或單擊預約義範圍時觸發

cancel.daterangepicker:單擊cancel按鈕時觸發

如：

$('#dateTime').daterangepicker({
                timePicker: true,
                timePicker24Hour: true,
                timePickerSeconds: true,
                linkedCalendars: false,
                autoUpdateInput: false,
                showDropdowns: true,
                locale: {
                    format: "YYYY-MM-DD hh:mm:ss",
                    applyLabel: "肯定",
                    cancelLabel: "取消",
                    daysOfWeek: ["週日", "週一", "週二", "週三", "週四", "週五", "週六"],
                    monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
                    firstDay: 1
                }
            }).on('apply.daterangepicker', function(ev, picker) {
                console.log(picker.startDate._d);
                picker.element.val(dateTimeFormat(picker.startDate._d).string);
            });