Date Range Picker

xumengxing
1,820 阅读2分钟

中文网：www.daterangepicker.cn/#usage

Date Range Picker是用于选择日期范围，日期和时间的JavaScript组件，基于jQuery，Moment.js。

简单的使用例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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"/>
    <title>Document</title>
</head>
<body>
    <input type="text" name="daterange" value="01/01/2018 - 01/15/2018"/>
    <script>
        $('input[name="daterange"]').daterangepicker({
                startDate: '02/01/2014',  //最初选择的日期范围的开始日期。显示在input框中的开始时间
                endDate: '04/30/2014',   //最初选择的日期范围的结束日期。显示在input框中的结束时间
                minDate: '01/01/2010',
                maxDate: '12/31/2020',
                opens:'left'
            }, function(start, end, label) {
                // 时间框中的值改变时会调用
                console.log(start)
                console.log(end)
                console.log(label)
                console.log("选择了一个新的日期: "+start.format('YYYY-MM-DD') +' to '+end.format('YYYY-MM-DD'));
        });   
    </script>
</body>

</html>

结果： 点击上图中右箭头，可以看见选中的结束日期 不配置startDate,endDate，两项input框中选择的日期是其特性value中的值。下图是注释了配置startDate,endDate两行代码后的结果。

设置日期的方法

//创建新的日期范围选取器
$('#daterange').daterangepicker({ startDate:'03/05/2005', endDate:'03/06/2005' });
//更改选取器的选定日期范围
$('#daterange').data('daterangepicker').setStartDate('03/01/2014');
$('#daterange').data('daterangepicker').setEndDate('03/31/2014');

说明：

  1. 想要日期设置为空时不能使用$('#daterange').data('daterangepicker').setStartDate('')，这样日期的值为Invalid date，可以使用$('#daterange').val('');来清除输入。
  2. 任何时候设置日期的值后（无论以哪种方式）都会执行change事件。
 // 失去焦点，change事件
 $('#daterange').off('change').on('change', function () {
                
            })

配置项说明

关键字说明
startDate最初选择的日期范围的开始日期。
endDate最初选择的日期范围的结束日期。
minDate用户可以选择的最早日期。
maxDate用户可以选择的最新日期。
singleDatePicker(true/false) 仅显示一个日历以选择一个日期，而不是具有两个日历的范围选择器。提供给回调的开始日期和结束日期将与选择的单个日期相同。
timePicker(true/false)添加选择框以选择除日期之外的时间。
autoApply(true/false) 隐藏“应用”和“取消”按钮，并在单击两个日期后自动应用新的日期范围。
alwaysShowCalendars(true/false) 通常，如果使用该ranges 选项指定预定义的日期范围，则在用户单击“自定义范围”之前，不会显示用于选择自定义日期范围的日历。如果将此选项设置为true，则始终会显示用于选择自定义日期范围的日历。
timePickerSeconds在timePicker中显示秒数。
timePicker24Hour(true/false)使用24小时而不是12小时，删除AM / PM选择。
opens('left'/'right'/'center') 选择器是否显示为左侧，右侧，或者它所附加的HTML元素下方居中。
locale(object) 允许您为按钮和标签提供本地化字符串，自定义日期格式，以及更改日历的第一天。locale在配置生成器中检查以查看如何自定义这些选项。
avatar
文章
阅读
粉丝