Date Range Picker-日期插件

最新推荐文章于 2024-08-09 07:25:47 发布

逆境中徘徊

最新推荐文章于 2024-08-09 07:25:47 发布

阅读量1.4k

点赞数

分类专栏： JS和Juery

JS和Juery 专栏收录该内容

47 篇文章 2 订阅

订阅专栏

转载：http://www.daterangepicker.com/

选项

startDate（日期或字符串）最初选择的日期范围的开始日期。如果提供字符串，则必须与设置中locale设置的日期格式字符串匹配。
endDate:(日期或字符串）最初选择的日期范围的结束日期。
minDate:(日期或字符串）用户可以选择的最早日期。
maxDate:(日期或字符串）用户可以选择的最新日期。
maxSpan:( object）所选开始日期和结束日期之间的最大跨度。maxSpan在配置生成器中检查一下如何使用它的示例。您可以提供moment库允许您添加到日期的任何对象。
showDropdowns:( true / false）显示年份和月份选择日历上方的框以跳转到特定的月份和年份。
minYear:(数字）showDropdowns设置为true 时下拉列表中显示的最小年份。
maxYear:(数字）showDropdowns设置为true 时下拉列表中显示的最大年份。
showWeekNumbers:( true / false）在日历的每周开始时显示本地化的周数。
showISOWeekNumbers:( true / false）在日历的每周开始时显示ISO周数。
timePicker:( true / false）添加选择框以选择除日期之外的时间。
timePickerIncrement:(数字）分钟选择列表的增量（即30，仅允许选择以0或30结尾的时间）。
timePicker24Hour:( true / false）使用24小时而不是12小时，删除AM / PM选择。
timePickerSeconds：（true / false）在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:(字符串）将添加日期范围选择器的父元素的jQuery选择器，如果没有提供，这将是'body'

方法

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

setStartDate(Date or string)：将日期范围选择器的当前选定开始日期设置为提供的日期
setEndDate(Date or string)：将日期范围选择器的当前所选结束日期设置为提供的日期

用法示例：

活动

在您将选择器附加到的元素上会触发几个事件，您可以监听它们。

show.daterangepicker：显示选择器时触发
hide.daterangepicker：隐藏选择器时触发
showCalendar.daterangepicker：显示日历时触发
hideCalendar.daterangepicker：隐藏日历时触发
apply.daterangepicker：单击应用按钮时，或单击预定义范围时触发
cancel.daterangepicker：单击取消按钮时触发

某些应用程序需要“清除”而不是“取消”功能，这可以通过更改按钮标签和观察取消事件来实现：

案例

$('#demo').daterangepicker({
    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')]
    },
    "locale": {
        "format": "MM/DD/YYYY",
        "separator": " - ",
        "applyLabel": "Apply",
        "cancelLabel": "Cancel",
        "fromLabel": "From",
        "toLabel": "To",
        "customRangeLabel": "Custom",
        "weekLabel": "W",
        "daysOfWeek": ["Su", "Mo", "Tu",  "We","Th", "Fr", "Sa" ],
        "monthNames": ["January","February","March","April", "May", "June","July","August","September","October", "November","December"],
        "firstDay": 1
    },
    "linkedCalendars": false,
    "autoUpdateInput": false,
    "showCustomRangeLabel": false,
    "alwaysShowCalendars": true,
    "startDate": "02/10/2019",
    "endDate": "02/16/2019",
    "opens": "left"
}, function (start, end, label) {
    console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
});

下载：https://pan.baidu.com/s/1F_HhwnrM9z7Txh4LKaFMmA