第一個是Date Range Picker 的示例，第二個時bootstrap DateTimePicker的插件 ``` <!-- 自定義的搜索框 --> <li> <label>出賬時間： </label> <input type="text" name="accounts_expenditure_time" value=""/> <script> $(function() { $('input[name="accounts_expenditure_time"]').daterangepicker({ singleDatePicker:true, showDropdowns:true,//顯示年份和月份選擇日歷上方的框以跳轉到特定的月份和年份 opens:'left', minDate:'1949', maxDate:'2050', locale: { format:'YYYY-MM-DD' //format:'YYYY' }, }, function(start, end, label) { console.log("選擇了一個新的日期: "+start.format('YYYY-MM-DD') +' to '+end.format('YYYY-MM-DD')); }); }); </script> </li> <li> <div> <div class="input-group date" id="timepicker_dash" data-date-format="YYYY-MM-DD" data-target-input="nearest"> <input class="form-control datetimepicker-input" type="text" id="search_dash" name="dash" value="" placeholder="選擇時間" autocomplete="off" data-target="#timepicker_dash"> <div class="input-group-append" data-target="#timepicker_dash" data-toggle="datetimepicker"> <div class="input-group-text"><i class="far fa-calendar"></i></div> </div> </div> </div> </li> <script type="text/javascript"> $(function () { $('#timepicker_dash').datetimepicker() }) </script> <!-- 自定義的搜索框結束 --> ``` [DateTimePicker控件簡介—DateTimePicker中文網](https://www.datetimepicker.cn/intro/) 官方代碼參考 ``` $("id/class").datetimepicker() ``` 只顯示年 ``` <input id="overdue2" type="text" > $("#overdue2").datetimepicker({ format: 'yyyy', autoclose: true, startView:4, minView:4, todayHighlight:true }); ``` bootstrap將這個日期組件封裝到了datetimepicker插件里[DateTime Picker · Bootstrap (bootcss.com)](https://www.bootcss.com/p/bootstrap-datetimepicker/) ## [Date Range Picker](https://www.daterangepicker.cn/#example5) ``` <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/> ``` 日期范圍選擇器 ``` $('input[name="dates"]').daterangepicker(); //您可以使用選項自定義日期范圍選擇器，并在用戶通過提供回調函數選擇新日期時收到通知 <input type="text" name="daterange" value="01/01/2018 - 01/15/2018"/> <script> $(function() { $('input[name="daterange"]').daterangepicker({ opens:'left' }, function(start, end, label) { console.log("選擇了一個新的日期: "+start.format('YYYY-MM-DD') +' to '+end.format('YYYY-MM-DD')); }); }); </script> ```  日期范圍選擇器與時間 ``` <input type="text" name="datetimes"/> <script> $(function() { $('input[name="datetimes"]').daterangepicker({ timePicker:true, startDate:moment().startOf('hour'), endDate:moment().startOf('hour').add(32, 'hour'), locale: { format:'M/DD hh:mm A' } }); }); </script> ```  [單日期選擇器](https://www.daterangepicker.cn/#example3) ``` <input type="text" name="birthday" value="1[Db獲取器](Db%E8%8E%B7%E5%8F%96%E5%99%A8.md)0/24/1984"/> <script> $(function() { $('input[name="birthday"]').daterangepicker({ singleDatePicker:true,//僅顯示一個日歷以選擇一個日期，而不是具有兩個日歷的范圍選擇器。提供給回調的開始日期和結束日期將與選擇的單個日期相同 showDropdowns:true,//顯示年份和月份選擇日歷上方的框以跳轉到特定的月份和年份 minYear:1901,//設置為true 時下拉列表中顯示的最小年份 maxYear:parseInt(moment().format('YYYY'),10) }, function(start, end, label) { var years =moment().diff(start, 'years'); alert("You are "+ years +" years old!"); }); }); ```  [預定義的日期范圍](https://www.daterangepicker.cn/#example4) ``` <div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%"> <i class="fa fa-calendar"></i>&nbsp; <span></span><i class="fa fa-caret-down"></i> </div> <script type="text/javascript"> $(function() { var start =moment().subtract(29, 'days'); var end =moment(); functioncb(start, end) { $('#reportrange span').html(start.format('MMMM D, YYYY') +' - '+end.format('MMMM D, YYYY')); } $('#reportrange').daterangepicker({ startDate: start, endDate: end, 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')] } }, cb); cb(start, end); }); </script> ```  [輸入最初為空](https://www.daterangepicker.cn/#example5) ``` <input type="text" name="datefilter" value=""/> <script type="text/javascript"> $(function() { $('input[name="datefilter"]').daterangepicker({ autoUpdateInput:false, locale: { cancelLabel:'Clear' } }); $('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) { $(this).val(picker.startDate.format('MM/DD/YYYY') +' - '+picker.endDate.format('MM/DD/YYYY')); }); $('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) { $(this).val(''); }); }); </script> ``` # [選項](https://www.daterangepicker.cn/#options) * `startDate`最初選擇的日期范圍的開始日期。如果提供字符串，則必須與設置中`locale`設置的日期格式字符串匹配。 * `endDate`: (Date or string) 最初選擇的日期范圍的結束日期。 * `minDate`: (Date or string) 用戶可以選擇的最早日期。 * `maxDate`: (Date or string) 用戶可以選擇的最新日期。 * `maxSpan`: (object)所選開始日期和結束日期之間的最大跨度。`maxSpan`在配置生成器中檢查一下如何使用它的示例。您可以提供`moment`庫允許您添加到日期的任何對象。 * `showDropdowns`: (true/false) 顯示年份和月份選擇日歷上方的框以跳轉到特定的月份和年份。 * `minYear`: (number)`showDropdowns`設置為true 時下拉列表中顯示的最小年份。 * `maxYear`: (number)`showDropdowns`設置為true 時下拉列表中顯示的最大年份。 * `showWeekNumbers`: (true/false) 在日歷的每周開始時顯示本地化的周數。 * `showISOWeekNumbers`: (true/false) 在日歷的每周開始時顯示ISO周數。 * `timePicker`: (true/false)添加選擇框以選擇除日期之外的時間。 * `timePickerIncrement`: (number) 分鐘選擇列表的增量（即30，僅允許選擇以0或30結尾的時間）。 * `timePicker24Hour`: (true/false)使用24小時而不是12小時，刪除AM / PM選擇。 * `timePickerSeconds`: 在timePicker中顯示秒數。 * `ranges`: (object) 設置用戶可以選擇的預定義日期范圍。每個鍵都是范圍的標簽，其值是一個數組，其中兩個日期表示范圍的邊界。單擊ranges配置生成器中的示例。 * `showCustomRangeLabel`: (true/false)`ranges`使用該選項時，在預定義范圍列表的末尾顯示“自定義范圍” 。只要當前日期范圍選擇與其中一個預定義范圍不匹配，此選項就會突出顯示。單擊它將顯示日歷以選擇新范圍。 * `alwaysShowCalendars`: (true/false) 通常，如果使用該`ranges`選項指定預定義的日期范圍，則在用戶單擊“自定義范圍”之前，不會顯示用于選擇自定義日期范圍的日歷。如果將此選項設置為true，則始終會顯示用于選擇自定義日期范圍的日歷。 * `opens`: ('left'/'right'/'center') 選擇器是否顯示為左側，右側，或者它所附加的HTML元素下方居中。 * `drops`: ('down'/'up') 選擇器是出現在下面（默認）還是高于它所附加的HTML元素。 * `buttonClasses`: (string) 將添加到apply和cancel按鈕的CSS類名。 * `applyButtonClasses`: (string) 將僅添加到“應用”按鈕的CSS類名。 * `cancelButtonClasses`: (string) 將僅添加到取消按鈕的CSS類名。 * `locale`: (object) 允許您為按鈕和標簽提供本地化字符串，自定義日期格式，以及更改日歷的第一天。`locale`在配置生成器中檢查以查看如何自定義這些選項。 * `singleDatePicker`: (true/false) 僅顯示一個日歷以選擇一個日期，而不是具有兩個日歷的范圍選擇器。提供給回調的開始日期和結束日期將與選擇的單個日期相同。 * `autoApply`: (true/false) 隱藏“應用”和“取消”按鈕，并在單擊兩個日期后自動應用新的日期范圍。 * `linkedCalendars`: (true/false) 啟用后，顯示的兩個日歷將始終為兩個連續月份（即1月和2月），當點擊日歷上方的左箭頭或右箭頭時，兩個日歷都會提前。禁用時，兩個日歷可以單獨進行，并顯示任何月份/年份。 * `isInvalidDate`: (function) 在顯示之前在兩個日歷中傳遞每個日期的函數，并且可以返回true或false以指示該日期是否可供選擇。 * `isCustomDate`: (function) 在顯示之前在兩個日歷中傳遞每個日期的函數，并且可以返回CSS類名的字符串或數組以應用于該日期的日歷單元格。 * `autoUpdateInput`: (true/false)指示日期范圍選擇器是否應`<input>`在初始化時以及所選日期更改時自動更新其附加元素的值。 * `parentEl`: (string) 將添加日期范圍選擇器的父元素的jQuery選擇器，如果沒有提供，這將是'body' # [方法](https://www.daterangepicker.cn/#methods) 您可以 使用和方法以編程方式更新`startDate`和`endDate`在選擇器中。您可以通過附加元素的數據屬性訪問Date Range Picker對象及其功能和屬性。 var drp =$('#daterange').data('daterangepicker'); * `setStartDate(Date or string)`: 將日期范圍選擇器的當前選定開始日期設置為提供的日期 * `setEndDate(Date or string)`: 將日期范圍選擇器的當前所選結束日期設置為提供的日期 **用法示例：** ``` //創建新的日期范圍選取器$('#daterange').daterangepicker({ startDate:'03/05/2005', endDate:'03/06/2005' });//更改選取器的選定日期范圍$('#daterange').data('daterangepicker').setStartDate('03/01/2014');$('#daterange').data('daterangepicker').setEndDate('03/31/2014'); ``` # [事件](https://www.daterangepicker.cn/#events) 在您附加選擇器的元素上會觸發幾個事件，您可以監聽它們。 * `show.daterangepicker`: 顯示選擇器時觸發 * `hide.daterangepicker`: 隱藏選擇器時觸發 * `showCalendar.daterangepicker`: 顯示日歷時觸發 * `hideCalendar.daterangepicker`: 隱藏日歷時觸發 * `apply.daterangepicker`: 單擊應用按鈕時，或單擊預定義范圍時觸發 * `cancel.daterangepicker`: 單擊取消按鈕時觸發 某些應用程序需要“清除”而不是“取消”功能，這可以通過更改按鈕標簽和觀察取消事件來實現： ``` $('#daterange').daterangepicker({ locale: { cancelLabel:'Clear' } }); $('#daterange').on('cancel.daterangepicker', function(ev, picker) { //做點什么，比如清除輸入 $('#daterange').val(''); }); ```