先聲明一下，本文講的是基於bootstrap和VUE前端框架下的所使用的控件，效果如下：
1、安裝daterangepicker控件
npm install --save daterangepicker
2、導入js和css
import 'daterangepicker/daterangepicker'
import 'daterangepicker/daterangepicker.css'
import moment from 'daterangepicker/moment.min'
3、格式化日期
Date.prototype.Format = function (fmt) { // author: meizz
var o = {
'M+': this.getMonth() + 1, // 月份
'd+': this.getDate(), // 日
'h+': this.getHours(), // 小時
'm+': this.getMinutes(), // 分
's+': this.getSeconds(), // 秒
'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
'S': this.getMilliseconds() // 毫秒
}
if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length)) }
for (var k in o) {
if (new RegExp('(' + k + ')').test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))) }
}
return fmt
}
4、初始化日期，根據頁面上的id進行渲染
initDate: function (id) {
if ($(id).is(':visible')) { //id爲可見狀態的就進行渲染，id不可見進行延遲加載，每次延遲0.5秒，一直延遲50次，防止id還沒出來渲染失敗
$(id).daterangepicker({
'singleDatePicker': true,
'showDropdowns': true,
'timePicker': false,
'timePicker24Hour': false,
'startDate': moment().hours(0).minutes(0).seconds(0), // 設置開始日期、當前日期
'opens': 'center',
'drops': 'down',
'locale': {
//格式
'format': 'YYYY-MM-DD',
'separator': ' - ',
'applyLabel': '確定',
'cancelLabel': '取消',
'fromLabel': 'From',
'toLabel': '到',
'customRangeLabel': 'Custom',
'weekLabel': 'W',
//中文周
'daysOfWeek': [
'日',
'一',
'二',
'三',
'四',
'五',
'六'
],
//中文月
'monthNames': [
'一月',
'二月',
'三月',
'四月',
'五月',
'六月',
'七月',
'八月',
'九月',
'十月',
'十一月',
'十二月'
],
'firstDay': 1
}
}, function (start, end, label) {
console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
})
} else {
if (this.temp > 50) {
alert('系統錯誤，請刷新重試')
this.temp = 0
}
this.temp++
// 遞歸 等待dom渲染完畢
const _this = this
setTimeout(function () { _this.initDate(id) }, 500)
}
}
獲取值的方法第一個是選擇觸發，第二是通過$("#id").val獲取
當然可以配置個多屬性和方法，以下是官方文檔，文檔地址http://www.daterangepicker.com/#options
屬性
startDate（日期或字符串）初始選擇的日期範圍的開始日期。如果提供字符串，則它必須與設置中locale設置的日期格式字符串匹配。
endDate：（日期或字符串）最初選擇的日期範圍的結束日期。
minDate：（日期或字符串）用戶可以選擇的最早日期。
maxDate：（日期或字符串）用戶可以選擇的最新日期。
maxSpan：（對象）所選開始日期和結束日期之間的最大跨度。maxSpan在配置生成器中檢查有關如何使用它的示例。您可以提供moment庫允許您添加到日期的任何對象。
showDropdowns：（是/否）在日曆上方顯示年和月選擇框，以跳至特定的月和年。
minYear：（數字）當showDropdowns設置爲true 時，下拉列表中顯示的最小年份。
maxYear：（數字）當showDropdowns設置爲true 時，下拉列表中顯示的最大年份。
showWeekNumbers：（是/否）在日曆的每個星期初顯示本地化的星期數。
showISOWeekNumbers：（是/否）在日曆的每個星期初顯示ISO週數。
timePicker：（是/否）添加選擇框以選擇日期以外的時間。
timePickerIncrement：（數字）分鐘選擇列表的時間增量（即30，僅允許選擇以0或30結尾的時間）。
timePicker24Hour：（是/否）使用24小時而不是12小時時間，刪除AM / PM選擇。
timePickerSeconds：（是/否）在timePicker中顯示秒。
ranges：（對象）設置用戶可以選擇的預定義日期範圍。每個鍵都是該範圍的標籤，其值是一個帶有兩個日期的數組，兩個日期代表該範圍的邊界。單擊ranges配置生成器以獲取示例。
showCustomRangeLabel：（true / false）ranges使用該選項時，在預定義範圍列表的末尾顯示“自定義範圍” 。當前日期範圍選擇與預定義範圍之一不匹配時，此選項將突出顯示。單擊它會顯示日曆以選擇新範圍。
alwaysShowCalendars：（是/否）通常，如果使用ranges選項指定預定義的日期範圍，則在用戶單擊“自定義範圍”之前，不會顯示用於選擇自定義日期範圍的日曆。當此選項設置爲true時，將始終顯示用於選擇自定義日期範圍的日曆。
opens：（'left'/'right'/'center'）選擇器是顯示在其所連接的HTML元素的左側，右側還是居中。
drops：（'down'/'up'）選擇器是顯示在附加的HTML元素的下方（默認）還是上方。
buttonClasses：（字符串）將同時添加到“應用”和“取消”按鈕的CSS類名稱。
applyButtonClasses：（字符串）僅將添加到“應用”按鈕的CSS類名稱。
cancelButtonClasses：（字符串）將僅添加到“取消”按鈕的CSS類名稱。
locale：（對象）可讓您提供按鈕和標籤的本地化字符串，自定義日期格式以及更改日曆的第一天。locale在配置生成器中檢查以查看如何自定義這些選項。
singleDatePicker：（是/否）僅顯示一個日曆以選擇一個日期，而不顯示具有兩個日曆的範圍選擇器。提供給回調的開始日期和結束日期將與所選的同一日期相同。
autoApply：（是/否）隱藏“應用”和“取消”按鈕，並在單擊兩個日期後立即自動應用新的日期範圍。
linkedCalendars：（是/否）啓用後，顯示的兩個日曆將始終連續兩個月（即一月和二月），並且當單擊日曆上方的向左或向右箭頭時，兩者都會前進。禁用後，兩個日曆可以分別進行高級顯示並顯示任何月份/年份。
isInvalidDate：（函數）在顯示兩個日曆中的每個日期之前傳遞的函數，並且可能返回true或false以指示該日期是否可供選擇。
isCustomDate：（函數）在顯示兩個日曆中的每個日期之前傳遞的函數，並且可以返回字符串或CSS類名稱數組以應用於該日期的日曆單元格。
autoUpdateInput：（是/否）指示日期範圍選擇器是否應<input>在初始化時以及所選日期更改時自動更新其附加的元素的值。
parentEl：（字符串）日期範圍選擇器將添加到的父元素的jQuery選擇器（如果未提供，則爲'body'）
方法
您可以編程方式更新startDate，並endDate 在使用機械臂setStartDate和setEndDate方法。您可以通過附加到其的元素的數據屬性來訪問“日期範圍選擇器”對象及其功能和屬性。
setStartDate(Date or string)：將日期範圍選擇器的當前選定開始日期設置爲提供的日期
setEndDate(Date or string)：將日期範圍選擇器的當前選定結束日期設置爲提供的日期
觸發事件
將選擇器附加到的元素上會觸發幾個事件，您可以聽這些事件。
show.daterangepicker：顯示選擇器時觸發
hide.daterangepicker：隱藏選擇器時觸發
showCalendar.daterangepicker：在顯示日曆時觸發
hideCalendar.daterangepicker：隱藏日曆時觸發
apply.daterangepicker：單擊“應用”按鈕或單擊預定義範圍時觸發
cancel.daterangepicker：單擊取消按鈕時觸發
某些應用程序需要“清除”功能而不是“取消”功能，這可以通過更改按鈕標籤並注意cancel事件來實現：
儘管將回調傳遞給構造函數是偵聽所選日期範圍內更改的最簡單方法，但即使選擇未更改，您也可以在每次單擊Apply按鈕時執行一些操作：
import 'daterangepicker/daterangepicker'
import 'daterangepicker/daterangepicker.css'
import moment from 'daterangepicker/moment.min'
import '
import 'daterangepicker/daterangepicker'
import 'daterangepicker/daterangepicker.css'
import moment from 'daterangepicker/moment.min'
aterangepicker/daterangepicker'
import 'daterangepicker/daterangepicker.css'
import moment from 'daterangepicker/moment.min'