jquery时间范围选择器插件：daterangepicker

文章索引

开始

引入资源文件：

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

代码：

$('input[name="dates"]').daterangepicker();

1	$('input[name="dates"]').daterangepicker();

示例

带回调的简单日期范围选择器

<input type="text" name="daterange" value="01/01/2018 - 01/15/2018" />

<script>
$(function() {
  $('input[name="daterange"]').daterangepicker({
    opens: 'left'
  }, function(start, end, label) {
    console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
  });
});
</script>

$(function() {

$('input[name="daterange"]').daterangepicker({

opens: 'left'

}, function(start, end, label) {

console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));

});

</script>

带时间的日期范围选择器

<input type="text" name="datetimes" />

<script>
$(function() {
  $('input[name="datetimes"]').daterangepicker({
    timePicker: true,
    startDate: moment().startOf('hour'),
    endDate: moment().startOf('hour').add(32, 'hour'),
    locale: {
      format: 'M/DD hh:mm A'
    }
  });
});
</script>

$(function() {

$('input[name="datetimes"]').daterangepicker({

timePicker: true,

startDate: moment().startOf('hour'),

endDate: moment().startOf('hour').add(32, 'hour'),

locale: {

format: 'M/DD hh:mm A'

}

});

</script>

单一日期选择器

<input type="text" name="birthday" value="10/24/1984" />

<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>

$(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>

预定义的日期范围

<div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%;box-sizing:border-box;">
    <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();

    function cb(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>

</div>

$(function() {

var start = moment().subtract(29, 'days');

var end = moment();

function cb(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>

输入初始为空

<input type="text" name="datefilter" value="" />

<script type="text/javascript">
$(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>

$(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>

中文

<input type="text" name="chinese" value="" />

<script type="text/javascript">
$(function() {
  $('input[name="datefilter"]').daterangepicker({
    autoUpdateInput: false,
    locale: {
      applyLabel: '确定',
      cancelLabel: '取消',
      fromLabel: '起始时间',
      toLabel: '结束时间',
      customRangeLabel: '自定义',
      daysOfWeek: [ '日', '一', '二', '三', '四', '五', '六' ],
      monthNames: [ '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ],
      firstDay: 1
    }
  });
});
</script>

$(function() {

$('input[name="datefilter"]').daterangepicker({

autoUpdateInput: false,

locale: {

applyLabel: '确定',

cancelLabel: '取消',

fromLabel: '起始时间',

toLabel: '结束时间',

customRangeLabel: '自定义',

daysOfWeek: [ '日', '一', '二', '三', '四', '五', '六' ],

monthNames: [ '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ],

firstDay: 1

}

});

</script>

配置, 方法 & 事件

配置

参数	功能
startDate	(Date or string) 初始日期范围的开始日期
endDate	(Date or string) 初始日期范围的结束日期
minDate	(Date or string) 用户可以选择的最早日期
maxDate	(Date or string) 用户可以选择的最新日期
maxSpan	(object) 所选开始日期和结束日期之间的最大跨度
showDropdowns	(true/false) 在日历上方显示年份和月份选择框以跳转到特定月份和年份
minYear	(number) `showDropdowns`设置为 true 时下拉菜单中显示的最小年份
maxYear	(number) `showDropdowns`设置为 true 时下拉菜单中显示的最大年份
showWeekNumbers	(true/false) 在日历上每周开始时显示本地化的周数
showISOWeekNumbers	(true/false) 在日历上每周开始时显示 ISO 周数
timePicker	(true/false) 添加选择框以选择除日期之外的时间
timePickerIncrement	(number) 时间的分钟选择列表的增量（1~59）
timePicker24Hour	(true/false) 使用 24 小时而不是 12 小时时间，删除 AM/PM 选择
timePickerSeconds	(true/false) 在 timePicker 中显示秒数
ranges	(object) 设置用户可以选择的预定义日期范围，数组元素对象{[sDate,eDate]}
showCustomRangeLabel	(true/false) 使用 `ranges` 选项时，在预定义范围列表的末尾显示“自定义范围”
alwaysShowCalendars	(true/false) 使用 `ranges` 选项时，是否始终显示“自定义范围”
opens	(left/right/center) 选择器相对所附加 `HTML` 元素的对齐方式
drops	(‘down’/’up’/’auto’) 选择器出现在它所附加的 HTML 元素的下方（默认）还是上方
buttonClasses	(string) 将添加到应用和取消按钮的 CSS 类名称
applyButtonClasses	(string) 仅添加到应用按钮的 CSS 类名称
cancelButtonClasses	(string) 仅添加到取消按钮的 CSS 类名
locale	(object) 允许您为按钮和标签提供本地化字符串、自定义日期格式以及更改日历的第一天
singleDatePicker	(true/false) 仅显示一个日历以选择一个日期
autoApply	(true/false) 隐藏应用和取消按钮，并在单击两个日期后自动应用新的日期范围
linkedCalendars	(true/false) 单击日历左右切换时，是否同时控制两个日历
isInvalidDate	(function) 在两个日历中的每个日期显示之前传递它们的函数，并且可能返回 true 或 false 以指示该日期是否应该可供选择
isCustomDate	(function) 在两个日历中的每个日期显示之前传递它们的函数，并且可以返回一个字符串或 CSS 类名称数组以应用于该日期的日历单元格
autoUpdateInput	(true/false) 自动设置 `input` 值
parentEl	(string) 将添加日期范围选择器的父元素的 jQuery 选择器，如果未提供，则为“body”

Options

方法

您可以使用setStartDate和SetEndDate方法以编程方式以编程方式更新选项器中的StartDate和Enddate。

您可以通过附加到的元素的数据属性访问日期范围选择器对象及其函数和属性。

var drp = $('#daterange').data('daterangepicker');

1	var drp = $('#daterange').data('daterangepicker');

方法	功能
setStartDate	(Date or string) 设置日期范围选择器开始日期
setEndDate	(Date or string) 设置日期范围选择器结束日期

Methods

示例：

//create a new date range picker
$('#daterange').daterangepicker({ startDate: '03/05/2005', endDate: '03/06/2005' });

//change the selected date range of that picker
$('#daterange').data('daterangepicker').setStartDate('03/01/2014');
$('#daterange').data('daterangepicker').setEndDate('03/31/2014');

//create a new date range picker

$('#daterange').daterangepicker({ startDate: '03/05/2005', endDate: '03/06/2005' });

//change the selected date range of that picker

$('#daterange').data('daterangepicker').setStartDate('03/01/2014');

$('#daterange').data('daterangepicker').setEndDate('03/31/2014');

事件

事件名	功能
show.daterangepicker	显示选择器时触发
hide.daterangepicker	隐藏选择器时触发
showCalendar.daterangepicker	显示日历时触发
hideCalendar.daterangepicker	当日历被隐藏时触发
apply.daterangepicker	单击应用按钮或单击预定义范围时触发
cancel.daterangepicker	点击取消按钮时触发

Events

将“取消”改“清除”，并实现清除事件：

$('#daterange').daterangepicker({
  locale: { cancelLabel: 'Clear' }  
});

$('#daterange').on('cancel.daterangepicker', function(ev, picker) {
  //do something, like clearing an input
  $('#daterange').val('');
});

$('#daterange').daterangepicker({

locale: { cancelLabel: 'Clear' }

});

$('#daterange').on('cancel.daterangepicker', function(ev, picker) {

//do something, like clearing an input

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

$('#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'));

});

地址

官网地址：http://www.daterangepicker.com

Github：https://github.com/dangrossman/daterangepicker

本文地址：https://www.itcan.cn/2022/04/05/jquery-plugins-daterangepicker