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'));
});