您现在的位置是：技术博客 > 前端前端

日期插件Daterangepicker

Lucas2020-12-05 14:11【代码】936人已围观

简介daterangepicker是Bootstrap的一个时间组件,使用很方便,用于选择日期范围的JavaScript组件，设计用于Bootstrap CSS框架。

这款插件在web后台使用率很高，<a href="http://bsify.admui.com/daterangepicker/" target='_blank'>官网</a>有文档，想看更多的配置用法，一定得看官方文档。当然网上也有各种教程，但总感觉不够直接，不够实用。我这里整理了一份案例代码，效果图中的大概涵盖了基本常用的场景。

#### 直接先看效果图
![daterangepicker](/upload/article/image/f8/daterangepicker_01.png "daterangepicker")
#### 实现代码如下
```
<!DOCTYPE html>
<html>
<head>
    <title>daterangepicker</title>
    
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css"/>
    
    <script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css"/>
</head>
<body style="margin: 20px 0">
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <label for="startDate">选择某天（年月日）</label>
                <input type="text" class="form-control" id="SingleDay1" value="">
            </div>
            <div class="form-group">
                <label for="startDate">选择某天的某时间（年月日时分秒）</label>
                <input type="text" class="form-control" id="SingleTime1" value="">
            </div>
            <div class="form-group">
                <label for="parentEl">选择从某天 ~ 某天（年月日）</label>
                <input type="text" class="form-control" id="ChooseRangeDay1" value="">
            </div>
            <div class="form-group">
                <label for="parentEl">选择从某天 ~ 某天（年月日，含快捷方式）</label>
                <input type="text" class="form-control" id="ChooseRangeDay2" value="">
            </div>
            <div class="form-group">
                <label for="startDate">选择从某天某时间 ~ 某天某时间（年月日时分秒）</label>
                <input type="text" class="form-control" id="ChooseRangeTime1" value="">
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">

// 单日期选择，如：2020-01-01
    $('#SingleDay1').daterangepicker({
            locale: {
                format: 'YYYY-MM-DD',
                daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'], // 自定义周几的名称
                monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'
                ], // 自定义月份的名称
            },
            singleDatePicker: true,  //开启单日历
            showDropdowns: true,		//可下拉选择年，月
            maxDate: moment(new Date()), //设置最大日期为今天
            minDate: '2018-11-15', //设置最小日期，如：2020-12-01，2020-01等格式
            opens: 'right', //插件打开时的位置，默认“right”，可选：“left”，“center”，“right”
            drops: 'down', //插件打开时的位置，默认“down”，可选：“up”，“down”
        },
        function (start, end, label) {
            //选择日期后的回调
            console.log(start.format('YYYY-MM-DD'))
            console.log(end.format('YYYY-MM-DD'))
            console.log(label)
        });

// 单日期年月日时分秒选择，如：2020-01-01 01:02:03
    $('#SingleTime1').daterangepicker({
            locale: {
                format: 'YYYY-MM-DD HH:mm:ss',
                applyLabel: "确定",
                cancelLabel: "取消",
                resetLabel: "重置",
                daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'], // 自定义周几的名称
                monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'
                ], // 自定义月份的名称
            },
            singleDatePicker: true,  //开启单日历
            showDropdowns: true,		//可下拉选择年，月
            maxDate: moment(new Date()), //设置最大日期为今天
            minDate: '2018-11-15', //设置最小日期，如：2020-12-01，2020-01等格式
            opens: 'right', //插件打开时的位置，默认“right”，可选：“left”，“center”，“right”
            drops: 'down', //插件打开时的位置，默认“down”，可选：“up”，“down”
            timePicker: true, //显示时间
            timePicker24Hour: true, //时间制
            timePickerSeconds: true, //时间显示到秒 ，false则只显示到分
            startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期
            endDate: moment(new Date()), //设置结束器日期
        },
        function (start, end, label) {
            //选择日期后的回调
            console.log(start.format('YYYY-MM-DD'))
            console.log(end.format('YYYY-MM-DD'))
            console.log(label)
        });

// 从哪一天选择至哪一天，含快捷方式，如：2013-01-01 - 2013-12-31
    $('#ChooseRangeDay2').daterangepicker({
        locale: {
            format: 'YYYY-MM-DD',
            separator: " - ",
            applyLabel: "确定",
            cancelLabel: "取消",
            resetLabel: "重置",
            fromLabel: "起始时间",
            toLabel: "结束时间'",
            customRangeLabel: "自定义",
            weekLabel: "W",
            daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
            monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            firstDay: 1
        },
        ranges: {
            '今日': [moment(), moment()],
            '昨日': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            '最近7日': [moment().subtract(6, 'days'), moment()],
            '最近30日': [moment().subtract(29, 'days'), moment()],
            '本月': [moment().startOf('month'), moment().endOf('month')],
            '上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
            '今年': [moment().startOf('year'), moment().endOf('year')],
        },
        alwaysShowCalendars: true,
        startDate: moment().subtract(6, 'days'),  //7天前
        endDate: new Date(),                      //现在
        opens: "right",
    }, function (start, end, label) {
        console.log(start.format('YYYY-MM-DD'))
        console.log(end.format('YYYY-MM-DD'))
        console.log(label)
    });

// 从哪一天选择至哪一天，如：2013-01-01 - 2013-12-31
    $('#ChooseRangeDay1').daterangepicker({
            locale: {
                format: 'YYYY-MM-DD',  //设置显示格式
                applyLabel: '确定', //确定按钮文本，默认是“Apply”
                cancelLabel: '取消', //取消按钮文本，默认是“Cancel”
                resetLabel: "重置",
                separator: " ~ ",
                daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'], // 自定义周几的名称
                monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'
                ], // 自定义月份的名称
                maxDate: moment(new Date()), //设置最大日期
                opens: "center",
            },
        },
        function (start, end, label) {
            alert("选中: " + start.format('YYYY-MM-DD') + ' 到 ' + end.format('YYYY-MM-DD'));
        });

// 从某天某时间选择至某天某时间，如：2013-01-01 - 2013-12-31
    $('#ChooseRangeTime1').daterangepicker({
            locale: {
                format: 'YYYY-MM-DD HH:mm:ss',  //设置显示格式
                applyLabel: '确定', //确定按钮文本，默认是“Apply”
                cancelLabel: '取消', //取消按钮文本，默认是“Cancel”
                daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'], // 自定义周几的名称
                monthNames: [
                    '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'
                ], // 自定义月份的名称
                firstDay: 1,
                "opens": "center",
            },
            timePicker: true, //显示时间
            timePicker24Hour: true, //时间制
            timePickerSeconds: true, //时间显示到秒
            startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期
            endDate: moment(new Date()), //设置结束器日期
        },
        function (start, end, label) {
            alert("选中: " + start.format('YYYY-MM-DD HH:mm:ss') + ' 到 ' + end.format('YYYY-MM-DD  HH:mm:ss'));
        });

</script>
</html>

```

#### 参数配置

```
// 创建一个新的日期范围选择器
$('#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: apply按钮被点击，或者预定义范围标签被点击时触发事件 cancel.daterangepicker: cancel按钮被点击时触发事件
```

很赞哦！ ( 0 )

上一篇：有趣的js插件

下一篇：日期插件Datetimepicker