标签：tom show link cancel 改变 new 格式 function 显示
1，依赖关系
使用之前需要引用bootstrap.css daterangpicker.css jquery.js boostrap.js moment.js daterangpicker.js （红色为必须）
可以下载到本地，若是练习使用的话，可以使用cdn （http://www.bootcdn.cn/）
2，使用
官方网站 http://www.daterangepicker.com/
（1）选项
|
选项 |
类型 |
描述 |
|
startDate |
Date 或string |
日期范围的初始日期，要与“locale”设置的格式一致 |
|
endDate |
Date 或string |
日期范围的结束日期 |
|
minDate |
Date 或string |
用户可能选择的最早日期 |
|
maxDate |
Date 或string |
用户可能选择的最晚日期 |
|
maxSpan |
Object |
|
|
showDropdowns |
true/false |
在下拉日历框中选择年月日 |
|
minYear |
Number（前提 showDropdowns为true） |
在下拉日历中的最小年 |
|
maxYear |
Number（前提 showDropdowns为true） |
在下拉日历中的最大年限 |
|
showWeekNumbers |
true/false |
使用本地计算第xx周 |
|
showISOWeekNumbers |
true/false |
使用ISO计算周数字 |
|
timePicker |
true/false |
添加时间选择框 |
|
timePickerIncrement |
number |
时间增长范围 |
|
timePicker24Hour |
true/false |
24小时制 |
|
timePickerSeconds |
true/false |
在timePicker中显示秒 |
|
ranges |
Object |
设置用户能选择的日期范围（例last7 days为 May 16,2018-May 22,2018） |
|
showCustomRangeLabel |
true/false（前提，ranges已使用） |
在末尾显示自定位范围 |
|
alwaysShowCalendars |
true/false |
|
|
opens |
（‘left’/’right’/’center’） |
日历出现在html元素下方的（左/右/中）的位置 |
|
drops |
（‘down’/’up’） |
日历出现在HTML元素的上/下（默认）位置 |
|
buttonClasses |
string |
被添加到apply或cancel按钮的css类名 |
|
applyButtonClasses |
string |
只能被添加到apply按钮的css类名 |
|
cancelButtonClasses |
string |
只能被添加到cancel按钮的css类名 |
|
locale |
object |
本地化的时间格式 |
|
singleDatePicker |
true/false |
只有一个日历 |
|
autoApply |
true/false |
隐藏apply和cancel按钮，只要选新的日期范围就立即apply |
|
linkedCalendars |
true/false |
当启用时，显示的两个日历将始终是两个连续月份（即一月和二月），并且当单击日历上方的左箭头或右箭头时，两个日历都将被提前。当禁用时，两个日历可以分别提前和显示任何月份/年。 |
|
isInvalidDate |
function |
判断已选的日期是否有效 |
|
isCustomDate |
function |
|
|
autoUpdateInput |
true/false |
当被选的日期改变时，是否要自动更新<input>内的值 |
|
parentEl |
string |
将要添加日期范围选择器的父元素的jQuery选择器，如果不提供，这将是“body”。 |
（2）方法
|
方法 |
描述 |
|
setStartDate（Date or string） |
将日期范围选择器当前选定的开始日期设置为所提供的日期 |
|
setEndDate(date or string) |
（3）事件
|
事件 |
描述 |
|
show.daterangepicker |
当picker显示时触发 |
|
hide.daterangepicker |
当picker关闭时触发 |
|
showCalendar.daterangepicker |
当日历显示时触发 |
|
hideCalendar.daterangepicker |
当日历隐藏时触发 |
|
apply.daterangepicker |
当apply按钮或预定义范围点击时，触发 |
|
cancel.daterangepicker |
当cancel按钮点击时，触发 |
标签：tom show link cancel 改变 new 格式 function 显示
原文地址：https://www.cnblogs.com/hiluna/p/9074320.html
