首先，在您的网页中包含jQuery，Moment.js和Date Range Picker的文件：

然后将日期范围选择器附加到您想要触发它的任何内容：

Code:

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

Produces:

您可以使用选项自定义日期范围选择器，并在用户通过提供回调函数选择新日期时收到通知。

Code:

$(function() {

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

opens:'left'

}, function(start, end, label) {

console.log("选择了一个新的日期: "+start.format('YYYY-MM-DD') +' to '+end.format('YYYY-MM-DD'));

});

});

Produces:

Code:

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

}

});

});

Produces:

Code:

$(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!");

});

});

Produces:

Code:

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

});

Produces:

Code:

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

});

});

Produces:

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)指示日期范围选择器是否应 在初始化时以及所选日期更改时自动更新其附加元素的值。

parentEl: (string) 将添加日期范围选择器的父元素的jQuery选择器，如果没有提供，这将是'body'

您可以 使用和方法以编程方式更新startDate 和 endDate在选择器中。您可以通过附加元素的数据属性访问Date Range Picker对象及其功能和属性。

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

在您附加选择器的元素上会触发几个事件，您可以监听它们。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'));

});

parentEl

startDate

endDate

minDate

maxDate

opensrightleftcenter

dropsdownup

showDropdowns

minYear

maxYear

showWeekNumbers

showISOWeekNumbers

singleDatePicker

timePicker

timePicker24Hour

timePickerIncrement (in minutes)

timePickerSeconds

maxSpan (example value)

locale (example settings)

autoApply

buttonClasses

applyButtonClasses

cancelButtonClasses

ranges (with example predefined ranges)

alwaysShowCalendars

showCustomRangeLabel

linkedCalendars

autoUpdateInput

您的日期范围选择器

要复制的配置

麻省理工学院许可证(MIT)

特此授予任何获得本软件和相关文档文件(“软件”)副本的人免费许可，以无限制地交易本软件，包括但不限于使用，复制，修改，合并的权利根据以下条件，出版，分发，再许可和/或出售本软件的副本，并允许向其提供本软件的人员这样做：

上述版权声明和本许可声明应包含在本软件的所有副本或实质部分中。

本软件按“原样”提供，不提供任何明示或暗示的保证，包括但不限于适销性，特定用途的适用性和不侵权的保证。在任何情况下，作者或版权所有者均不对任何索赔，损害或其他责任承担任何责任，无论是在合同，侵权行为还是其他方面的行为，由本软件引起或与之相关，或与本软件的使用或其他交易有关。软件。