学习日期时间控件 daterangepicker

时间:2022-09-26 15:28:16

aterangepicker 是一款日期时间控件,可选择“年,月,日,时,分,秒”,可选择单面板,也可选择双面板(起止时间)。

单面板示例:daterangepicker 单面板 codepen 在线示例

双面板示例:daterangepicker 双面板 codepen 在线示例

一、daterangepicker 的配置项如下:

  • startDate(date/string)最初选择的日期范围的开始日期。如果您提供一个字符串,它必须与您的地区设置中的日期格式字符串相匹配。
  • endDate(date/string)初始选定日期范围的结束日期。

如(格式 MM/DD/YY) "startDate": "12/26/2018",  "endDate": "01/04/2018"

学习日期时间控件 daterangepicker 

  • minDate:(date/string)可以选择的最早日期。
  • maxDate:(date/string)可以选择的最新日期。

如(格式 MM/DD/YY) "minDate": "12/12/2018",  "maxDate": "12/28/2018"

 学习日期时间控件 daterangepicker

最早日期(2018年12月12日)以前的日期,和最新日期(2018年12月28日)以后的日期将不能被选择。

  • maxSpan:(object)所选开始和结束日期之间的最大跨度。选择双面板时有效

如 "maxSpan": { "days": 7 } 时:将跨度七天 

  • showDropdowns:(true/false)显示年和月选择框以上的日历跳转到一个特定的月和年。

如:"showDropdowns": true 时,年和月可以通过下来选择,否则只能左右切换,一月一月的增加或减少

学习日期时间控件 daterangepicker

  • minYear: (number)当下拉列表设置为true时,下拉列表中显示的最小年份。
  • maxYear: (number)下拉列表中显示的最大年份,当下拉列表设置为true时。
  • showWeekNumbers:(真/假)在日历上每周的开始显示本地化的周号。

学习日期时间控件 daterangepicker

  • showISOWeekNumbers(true/false)在日历上显示每周开始的ISO周号。

学习日期时间控件 daterangepicker 

  • timePicker:(true/false)除了日期之外,还添加了选择时间的选择框。

设置为 true 就可以选择时间,设置为 true 时,timePickerIncrement、timePicker24Hour、timePickerSeconds 才有效

  • timePickerIncrement:(number)时间选择列表的增量(例如,30只允许选择以0或30结尾的时间)。
  • timePicker24Hour:(true/false)使用24小时而不是12小时,去掉AM/PM选项。
  • timePickerSeconds:(true/false)在时间选择器中显示秒。

如:"timePicker": true, "timePicker24Hour": true, "timePickerIncrement": 10, "timePickerSeconds": true

学习日期时间控件 daterangepicker 

  • ranges:(object)设置可以从中选择的预定义日期范围。每个键是范围的标签,其值是一个数组,其中两个日期代表范围的界限。
  • showCustomRangeLabel: (true/false)在使用ranges选项时,在预定义范围列表的末尾显示“CustomRange”。当当前日期范围选择与预定义范围之一不匹配时,将突出显示此选项。单击它将显示日历以选择一个新范围。
  • alwaysshowcalendar: (true/false)通常,如果使用ranges选项指定预定义的日期范围,则选择自定义日期范围的日历在用户单击“自定义范围”之前不会显示。当此选项设置为true时,将始终显示用于选择自定义日期范围的日历。
  • opens:('left'/'right'/'center')选择器是否显示为向左对齐、向右对齐,还是在它所连接的HTML元素下居中。
  • drops:('down'/'up')选择器是否显示在(默认)或它所附加的HTML元素之上。
  • buttonClasses: (string) CSS类名将被添加到apply和cancel按钮。
  • applyButtonClasses: (string) CSS类名,只会添加到apply按钮。
  • cancelButtonClasses: (string) CSS类名,只会添加到cancel按钮。

如:"buttonClasses": "btn", "applyButtonClasses": "btn-apply", "cancelClass": "btn-cancel"

学习日期时间控件 daterangepicker

cancelBtn默认添加到关闭按钮,applyBtn默认添加到应用按钮

  • locale: (object)允许您为按钮和标签提供本地化的字符串,定制日期格式,并更改日历的第一天。

如:

"locale": {
        "format": "YYYY-MM-DD hh:mm:ss",
        "applyLabel": "确定",
        "cancelLabel": "取消",
        "daysOfWeek": ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
        "monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        "firstDay": 1
      }

格式为 "YYYY-MM-DD hh:mm:ss",第一天是周一,不再是默认的周日。

学习日期时间控件 daterangepicker

  • singleDatePicker:(true/false)只显示一个日历来选择一个日期,而不是显示一个有两个日历的范围选择器。为回调提供的开始和结束日期将与选择的日期相同。

单个日期选择还是起止日期的双面板选择。

  • autoApply:(true/false)隐藏apply和cancel按钮,并在单击两个日期时自动应用一个新的日期范围。
  • linkedcalendar:(true/false)当启用时,显示的两个日历总是连续两个月(即1月和2月),当单击日历上方的左箭头或右箭头时,这两个日历都会提前。当禁用时,这两个日历可以单独提前并显示任何月份/年。
  • isInvalidDate:(function)在两个日历中每个日期显示之前传递的函数,并可能返回true或false,以指示该日期是否可供选择。
  • isCustomDate:(function)一个函数,它在两个日历中的每个日期显示之前被传递,并且可以返回一个字符串或CSS类名数组来应用于该日期的日历单元格。
  • autoUpdateInput:(true/false)指示日期范围选择器是否应该在初始化时自动更新它所附加到的<input>元素的值,以及当所选日期发生更改时。
  • parentEl: (string)jQuery选择器的父元素,日期范围选择器将被添加到,如果没有提供,这将是“body”

二、daterangepicker 的方法如下:

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

如:

$("#dateTime").data("daterangepicker").setStartDate("2019-01-01 00:00:00");
$("#dateTime").data("daterangepicker").setEndDate("2019-12-31 23:59:59");

方法一定要写在配置项的后面,将得出 setStartDate属性未定义 Uncaught TypeError: Cannot read property 'setStartDate' of undefined

在初始化时设置时间输入域的值和 setStartDate 或 setEndDate 的值一致,以单面板为例:

<input type="text" id="dateTime" class="form-control" placeholder="请输入或选择时间(YYYY-MM-DD hh:mm:ss)">
$("#dateTime").val("2019-01-01 00:00:00");
$("#dateTime").daterangepicker({
  timePicker: true,
  timePicker24Hour: true,
  timePickerSeconds: true,
  linkedCalendars: false,
  autoUpdateInput: false,
  showDropdowns: true,
  singleDatePicker: true,
  locale: {
    format: "YYYY-MM-DD hh:mm:ss",
    applyLabel: "确定",
    cancelLabel: "取消",
    daysOfWeek: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
    monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
    firstDay: 1
  }
}).on("apply.daterangepicker", function(ev, picker) {
  picker.element.val(dateTimeFormat(picker.startDate._d).string);
});
$("#dateTime").data("daterangepicker").setStartDate("2019-01-01 00:00:00");

学习日期时间控件 daterangepicker 

三、daterangepicker 的事件如下:

show.daterangepicker:显示选择器时触发

hide.daterangepicker:隐藏选择器时触发

showCalendar.daterangepicker:当日历显示时触发

hideCalendar.daterangepicker:隐藏日历时触发

apply.daterangepicker:单击apply按钮或单击预定义范围时触发

cancel.daterangepicker:单击cancel按钮时触发

如:

$('#dateTime').daterangepicker({
                timePicker: true,
                timePicker24Hour: true,
                timePickerSeconds: true,
                linkedCalendars: false,
                autoUpdateInput: false,
                showDropdowns: true,
                locale: {
                    format: "YYYY-MM-DD hh:mm:ss",
                    applyLabel: "确定",
                    cancelLabel: "取消",
                    daysOfWeek: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
                    monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
                    firstDay: 1
                }
            }).on('apply.daterangepicker', function(ev, picker) {
                console.log(picker.startDate._d);
                picker.element.val(dateTimeFormat(picker.startDate._d).string);
            });