DateRangePicker

DateRangePicker是基于JQuery的时间日期选择插件。使用DateRangePicker插件可以在网页表单中添加一个时间日期范围选择下拉菜单,实现按照时间日期范围、时间段、时间跨度双日历选择。

DateRangePicker

如何使用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>&nbsp;
<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方法


你可以使用setStartDatesetEndDate方法对选择器中的startDateendDate进行更新。你可以通过你连接到的元素的数据属性来访问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'));
});

配置项生成工具


您的日期范围选择器

要复制的配置