bootstrap時間控制項的用法：bootstrap日期控制項參數

1、使用方法：

引入CSS文件：

<link href=”css/bootstrap/bootstrap.min.css” type=”text/css” rel=”stylesheet”/>

<link type=”text/css” href=”js/date/font-awesome.min.css” rel=”stylesheet”/>

<link type=”text/css” href=”js/date/daterangepicker-bs3.css” rel=”stylesheet”/>

引入JS文件：

<script src=”js/jquery-1.10.2.min.js”></script>

<script src=”js/bootstrap/bootstrap.min.js”></script>

<script type=”text/javascript” src=”js/date/moment.js”></script> <!–本地化js文件–>

<script type=”text/javascript” src=”js/date/daterangepicker.js”></script>

2、頁面設置：

3、JS文件配置：

4.效果展示：

5.其他參數：

`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

6.其他方法：

`show.daterangepicker`:日曆控制項顯示時

`hide.daterangepicker`:日曆控制項隱藏時

`apply.daterangepicker`:確定按鈕被點擊時

例如：

$(‘#daterange’).on(‘apply.daterangepicker’,function(ev, picker) {

console.log(picker.startDate.format(‘YYYY-MM-DD’));

console.log(picker.endDate.format(‘YYYY-MM-DD’));

});

`cancel.daterangepicker`:取消按鈕被點擊時

`setOptions(object,function)`: 設置操作

`setStartDate(Date/moment/string)`:設置起始時間

`setEndDate(Date/moment/string)`:設置結束時間