地址：http://www.daterangepicker.com/
demo地址:http://tamble.github.io/jquery-ui-daterangepicker/#event
api
參數
startDate: （日期對象、實踐對象或者字符串）初始開始時間
endDate: （日期對象、實踐對象或者字符串） 初始結束時間
minDate: （日期對象、實踐對象或者字符串） 可選最早時間
maxDate: （日期對象、實踐對象或者字符串） 可選最晚時間
dateLimit: (對象) 選擇開始日期和結束日期之間的最大跨度
timeZone: (字符串或數字) 時區，默認為本地時區
showDropdowns: (布爾) 在年月份選擇框上面顯示可以跳刀特定月份的選擇
showWeekNumbers: (布爾) 日歷的每周前顯示周數
timePicker: (布爾) 是否顯示時間選擇框
timePickerIncrement: (數字) 步長
timePicker12Hour: (布爾) 使用12小時制替代24小時，並添加AM/PM下拉框選項
timePickerSeconds: (布爾) 時間選擇框是否顯示秒數
ranges: (對象) 設定預定義日期范圍
opens: (字符串: 'left'/'right'/'center')選擇相對日期框的相對位置
buttonClasses: (數組) 自定義按鈕樣式
applyClass: (字符串) 自定義按鈕樣式（apply/應用）
cancelClass: (字符串) 自定義按鈕樣式（cancle/取消）
format: (字符串) Date/time 結果時間格式
separator: (字符串) 開始時間和結束時間的分割字符
locale: (對象) 本地化
singleDatePicker: (布爾) 只顯示一個時間
parentEl: (string) 容器，缺省為body
》》》》》》初始化插件《《《《《《
$('#reportrange').daterangepicker(
{
// startDate: moment().startOf('day'),
//endDate: moment(),
//minDate: '01/01/2012', //最小時間
maxDate : moment(),
//最大時間
dateLimit : {
days : 30
},
//起止時間的最大間隔
showDropdowns :
true
,
showWeekNumbers :
false
,
//是否顯示第幾周
timePicker :
true
,
//是否顯示小時和分鍾
timePickerIncrement : 60,
//時間的增量，單位為分鍾
timePicker12Hour :
false
,
//是否使用12小時制來顯示時間
ranges : {
//'最近1小時': [moment().subtract('hours',1), moment()],
'今日'
: [moment().startOf(
'day'
), moment()],
'昨日'
: [moment().subtract(
'days'
, 1).startOf(
'day'
), moment().subtract(
'days'
, 1).endOf(
'day'
)],
'最近7日'
: [moment().subtract(
'days'
, 6), moment()],
'最近30日'
: [moment().subtract(
'days'
, 29), moment()]
},
opens :
'right'
,
//日期選擇框的彈出位置
buttonClasses : [
'btn btn-default'
],
applyClass :
'btn-small btn-primary blue'
,
cancelClass :
'btn-small'
,
format :
'YYYY-MM-DD HH:mm:ss'
,
//控件中from和to 顯示的日期格式
separator :
' to '
,
locale : {
applyLabel :
'確定'
,
cancelLabel :
'取消'
,
fromLabel :
'起始時間'
,
toLabel :
'結束時間'
,
customRangeLabel :
'自定義'
,
daysOfWeek : [
'日'
,
'一'
,
'二'
,
'三'
,
'四'
,
'五'
,
'六'
],
monthNames : [
'一月'
,
'二月'
,
'三月'
,
'四月'
,
'五月'
,
'六月'
,
'七月'
,
'八月'
,
'九月'
,
'十月'
,
'十一月'
,
'十二月'
],
firstDay : 1
}
},
function
(start, end, label) {
//格式化日期顯示框
$(
'#reportrange span'
).html(start.format(
'YYYY-MM-DD HH:mm:ss'
) +
' - '
+ end.format(
'YYYY-MM-DD HH:mm:ss'
));
});