bootstrap日期范围选择插件daterangepicker详细使用方法

插件官方网站地址

bootstrap-daterangepicker是个很方便的插件，但是对我这种菜鸟来说，文档不够详细，摆弄了好久才整好。记录下来供以后参考，也希望能帮到有需要的朋友。

目前版本是2.1.25，以下使用方法均相当于此版本。

1. 所需静态文件

jquery@1.11.3_2
bootstrap@3.3.4
momentjs:moment@2.10.3
daterangepicker.js
daterangepicker.css

我一开始自己用的是bootstrap 4，jquery也用的最新版本，出来很多错误，暂时先改到文档中要求的版本。

将这些文件引入到网页中。

2. 定制

在官方网站上可以根据自己的需要定制并预览选择器。下面是各种选项：

每种选项的变化都可以在下面的选择器中预览，点击弹出窗口就可看到效果：

同时生成了代码在这个框中，这些代码后面要用到：

3. html代码

html代码可以多种多样，我用一个最简单的结合了bootstrap样式的输入框：

<div class="col-sm-4 input-group" id="date-picker">
    <span class="input-group-addon" id="basic-addon">日期范围</span>
    <input type = "text" id="date-range" class="form-control">
    <i id="calendar-icon" class="fa fa-calendar"></i>
</div>

4. 加入js代码

在body的最后，加入以下js代码：

<script type = "text/javascript">
    $(document).ready(function () {
        $(\'#date-range\').daterangepicker({
            "showDropdowns": true,
            "showISOWeekNumbers": true,
            "ranges": {
                \'今天\': [moment(), moment()],
                \'昨天\': [moment().subtract(1, \'days\'), moment().subtract(1, \'days\')],
                \'近一周\': [moment().subtract(6, \'days\'), moment().subtract(6, \'days\')],
                \'近一个月\': [moment().subtract(29, \'days\'), moment()],
                \'本月\': [moment().startOf(\'month\'), moment().endOf(\'month\')],
                \'上个月\': [moment().subtract(1, \'month\').startOf(\'month\'), moment().subtract(1, \'month\').endOf(\'month\')]
            },

            "locale": {
                "format": "YYYY/MM/DD",
                "separator": " - ",
                "applyLabel": "确定",
                "cancelLabel": "取消",
                "fromLabel": "从",
                "toLabel": "到",
                "customRangeLabel": "自定义",
                "weekLabel": "周",
                "daysOfWeek": [
                    "日",
                    "一",
                    "二",
                    "三",
                    "四",
                    "五",
                    "六"
                ],
                "monthNames": [
                    "1月",
                    "2月",
                    "3月",
                    "4月",
                    "5月",
                    "6月",
                    "7月",
                    "8月",
                    "9月",
                    "10月",
                    "11月",
                    "12月"
                ],
                "firstDay": 1
            },
            "alwaysShowCalendars": true,
            "startDate": moment().subtract(6, \'days\'),
            "endDate": moment(),
            "minDate": "2017年01月01日",
            "linkedCalendars": false,
            "maxDate": "2019年12月31日"
        }, function (start, end, label) {
            console.log("New date range selected: \' + start.format(\'YYYY-MM-DD\') + \' to \' + end.format(\'YYYY-MM-DD\') + \' (predefined range: \' + label + \')");
        });
    });
</script>

.daterangepicker后面的内容就是前面第二步最后自定义选项生成的代码。其中"ranges"选项需要修改成上面代码中这种动态的日期，不要用网站中选项生成的固定日期。
其中"locale"字典中是汉化内容。

5. 遇到的坑

1. 没有把ranges选项中的日期改成动态的，用的直接复制过来的日期，一直显示无效；

2. 设置maxDate和minDate时的默认格式为MM/DD/YYYY，前面locale里想设置成YYYY-MM-DD，结果总是无效；可以设置成MM-DD-YYYY或者MM-DD,YYYY，但就是不能设置成年份在最前面。后来将maxDate和minDate选项的数据也改成YYYY-MM-DD格式，才终于解决了问题。

3. 月份汉化以后，月份选择框和年份选择框垂直方向不对齐，看着非常别扭。在font-family最后加入"宋体"，问题解决（我用的chorme,不知道其他浏览器能不能解决）。

6.最终效果

如果帮到你了，请帮忙点赞！：-）

秒客网