DateRangePicker
DateRangePicker是基于JQuery的时间日期选择插件。使用DateRangePicker插件可以在网页表单中添加一个时间日期范围选择下拉菜单，实现按照时间日期范围、时间段、时间跨度双日历选择。
如何使用DateRangePicker
下载
CSS和JS文件引用
使用DateRangePicker需要在的网页中引用jQuery、Moment.js、DateRangePicker
将以下文件标签添加到 <head> 标签中
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.24.0/locale/zh-cn.jss"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/bootstrap-daterangepicker/3.1/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-daterangepicker/3.1/daterangepicker.min.css"/>
开始使用DateRangePicker
简单的初始化DateRangePicker示例，在网页中分别加入以下html和js代码
HTML
<input name="dates" type="text" >
javaScript
$('input[name="dates"]').daterangepicker();
效果(点击下方输入框的空白处)
实例
带回调的日期范围选择器
Code
<input name="daterange" type="text" >
<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>效果
日期及时间范围选择器
Code
<input name="datetimes" type="text" >
<script>
$(function() {
$('input[name="datetimes"]').daterangepicker({
timePicker:true,
timePickerSeconds:true,
timePicker24Hour:true,
startDate:moment().startOf('hour'),endDate:moment().startOf('hour').add(32,'hour'),
locale:{format:'YYYY-MM-DD HH:mm:ss'}
});
});
</script>效果
单日期选择器
Code
<input name="datetimes" type="text" >
<script>
$(function() {
$('input[name="birthday"]').daterangepicker({
singleDatePicker:true,
showDropdowns:true,
minYear:1901,
maxYear:parseInt(moment().format('YYYY'),10)
}, function(start, end, label) {
var years =moment().diff(start, 'years');
alert("You are "+ years +" years old!");
});
});
</script>效果
快速选取自定义日期范围
Code
<div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
<i class="fa fa-calendar"></i>
<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>效果
选择器初始值为空
Code
<input name="datefilter" type="text" >
<script>
$(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>效果
DateRangePicker配置项
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'
DateRangePicker方法
你可以使用setStartDate和setEndDate方法对选择器中的startDate和endDate进行更新。你可以通过你连接到的元素的数据属性来访问DateRangePicker对象及其功能和属性。
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');DateRangePicker事件
事件会在到选择器的元素上被触发，你可以监听这些事件。
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('');
});虽然向构造函数传递回调是监听所选日期范围内变化的最简单方法，但你也可以在每次点击应用按钮时做一些事情，即使选择没有改变。
$('#daterange').daterangepicker();
$('#daterange').on('apply.daterangepicker', function(ev, picker) {
console.log(picker.startDate.format('YYYY-MM-DD'));
console.log(picker.endDate.format('YYYY-MM-DD'));
});