dateRangePicker時間范圍控件

Github：https://github.com/dangrossman/bootstrap-daterangepicker/

 

使用daterangepicker()為元素創建一個時間范圍控件

<script type="text/javascript">
$(document).ready(function(){
         $('input[name="daterange"]').daterangepicker();
});
</script>

 

 

daterangepicker()還可以有個操作對象參數和回調函數。當用戶選擇時間范圍后調用回調函數，參數是monent時間對象的開始時間、結束時間、預定義的范圍標簽選擇。

$('input[name="daterange"]').daterangepicker(
  {
    format: 'YYYY-MM-DD',
    startDate: '2013-01-01',
    endDate: '2013-12-31'
  },
  function(start, end, label) {
    alert('A date range was chosen: ' +start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
  }
);

 

 

參數

`startDate`: (Date object, moment object or string) 起始時間
`endDate`: (Date object, moment object or string) 結束時間
`minDate`: (Date object, moment object or string) 可選最早時間
`maxDate`: (Date object, moment object or string) 可選最遲時間
`timePicker`: (boolean) 是否顯示time選擇
`timePickerIncrement`: (number) time選擇遞增數
`timePicker12Hour`: (boolean) 是否12小時制
`opens`: (string: 'left'/'right') 顯示在元素左邊還是右邊
`buttonClasses`: (array) 按鈕樣式
`applyClass`: (string) 應用按鈕樣式
`cancelClass`: (string) 取消按鈕樣式
`format`: (string) date/time格式
`separator`: (string) 分隔符
`locale`: (object) 本地設置
`singleDatePicker`: (boolean) 是否是單個時間選擇器
`parentEl`: (string) 將控件放到哪個元素內，默認body函數方法

 

 

 

函數方法

`setOptions(object,function)`: 設置操作
`setStartDate(Date/moment/string)`:設置起始時間
`setEndDate(Date/moment/string)`:設置結束時間

 

 

事件

`show.daterangepicker`:Triggered when the picker is shown
 `hide.daterangepicker`:Triggered when the picker is hidden
 `apply.daterangepicker`:Triggered when the apply button is clicked
 `cancel.daterangepicker`:Triggered when the cancel button is clicked