bootstrap-daterangepicker：最好用的日期范围选择组件

红太狼 2021-05-10 11:18 567阅读 0赞

嗯，在我还没有发现bootstrap-daterangepicker组件时，  
在页面需要选择日期范围时，我是傻乎乎的创建两个日期组件。  
现在想想，以前的low劲真是不可忍呐！

### 零、效果展示 ###

现在是这样的：

![这里写图片描述][20170324131441360]

以前是这样的：

![这里写图片描述][20170324132132785]

不比不知道，一比高下立断。

### 一、源码下载 ###

[Date Range Picker for Bootstrap][]

注意要依赖Bootstrap, jQuery and Moment.js。

> Date Range Picker relies on Bootstrap, jQuery and Moment.js. Include the required scripts and stylesheet in your page.

### 二、使用方法 ###

1.  外层div上增加daterange class。
2.  一个普通的input标签。
3.  一个日历的i标签。

如此就好。

### 三、内部封装 ###

首先是js。

$(function() { 
        $(".daterange input").each(function() { 
            var $this = $(this);
    
            $this.daterangepicker({
                locale : {
                    "format" : "YYYY-MM-DD",// 显示格式
                    "separator" : " / ",// 两个日期之间的分割线
                    // 中文化
                    "applyLabel" : "确定",
                    "cancelLabel" : "取消",
                    "fromLabel" : "开始",
                    "toLabel" : "结束",
                    "daysOfWeek" : [ "日", "一", "二", "三", "四", "五", "六" ],
                    "monthNames" : [ "一月", "二月", "三月", "四月", "五月", "六", "七月", "八月", "九月", "十月", "十一月", "十二月" ],
                    "firstDay" : 1
                },
            }, function(start, end, label) { 
                // 点击确定后的事件，下面是为了bootstrap validate得校验，
                // 若未使用，可忽视
                if ($this.parents("form.required-validate").length > 0) {
                    var $form = $this.parents("form.required-validate");
    
                    var name = $this.attr("name");
                    if ($form.length > 0) {
                        var data = $form.data('bootstrapValidator');
                        data.updateStatus(name, 'NOT_VALIDATED', null)
                        // Validate the field
                        .validateField(name);
                    }
                }
            // 设置最小宽度，否则显示不全
            }).css("min-width", "210px").next("i").click(function() { 
                // 对日期的i标签增加click事件，使其在鼠标点击时可以拉出日期选择
                $(this).parent().find('input').click();
            });
        });
    });

再来看css。

/* 定位i标签在input标签内 */
    .daterange i { position: absolute; bottom: 10px; right: 14px; top: auto; cursor: pointer; }
    .daterange { position: relative; }
    /* daterange i end */

> 沉默王二公众号正在招募原创团队（写作、朗读），我们目前已有9人，期待你的加入！
> 
> ![20161224204853903][]

[20170324131441360]: /images/20210506/6c40c7a895e74a13971e9c17781d69f3.png
[20170324132132785]: /images/20210506/2669c781b8e045eeb3ce826d231a76c4.png
[Date Range Picker for Bootstrap]: http://www.daterangepicker.com/
[20161224204853903]: /images/20210506/30882791df684068aea63726b2497fba.png