jQuery 日历插件：daterangepicker

蔚落 2022-05-27 12:06 331阅读 0赞

官网：[http://www.daterangepicker.com/][http_www.daterangepicker.com]

## 介绍 ##

*  jQuery 插件库：[http://www.jq22.com/jquery-info14222][http_www.jq22.com_jquery-info14222]
 *  网友总结参数：[https://www.cnblogs.com/leijing0607/p/7698414.html][https_www.cnblogs.com_leijing0607_p_7698414.html]

## 例子 ##

// html
    <div class="input-group">
        <label class="input-group-addon markWith noBorderNoBg">完成时间：</label>
        <input type="text" class="datepicker form-control borderR" name="finishDoubleDateTime" id="finishDoubleDateTime" value="" placeholder="开始时间-结束时间">
    </div>
    
    
    // JavaScript
    $('#finishDoubleDateTime').daterangepicker({
        "linkedCalendars": false,
        showDropdowns: true,
        "locale": {
            format: 'YYYY-MM-DD',
            separator: ' ~ ',
        },
        autoApply: true,
        parentEl: $('#finishDoubleDateTime').parent(),
        startDate: fmtDate(getLastMonth())
    }, function(start, end, label) {
        beginTimeStore = start;
        endTimeStore = end;
        //console.log(this.startDate.format(this.locale.format));
        //console.log(this.endDate.format(this.locale.format));
        if(!this.startDate){
            this.element.val('');
        }else{
            this.element.val(this.startDate.format(this.locale.format) + this.locale.separator + this.endDate.format(this.locale.format));
        }
        table.fnDraw();
    });

## 参数 ##

### showDropdowns：是否允许年份和月份通过下拉框的形式选择 ###

可选值：true、false  
默认值：false（无下拉框）

### autoUpdateInput：是否自动更新 元素在初始化时的值，以及选择的日期变化时的值。 ###

可选值：true、false  
默认值：true

> 参考：[https://blog.csdn.net/qq\_33518042/article/details/77175645][https_blog.csdn.net_qq_33518042_article_details_77175645]  
> 打开和关闭daterangepicker选择时，是否自动传值到input\[text\] 这个DOM的属性。  
> 通过设置初始autoUpdateInput为false，可以实现初始值为空，此时 input 中设置的placeholder才能显现出来。  
> 但是设置该属性之后，不管怎么选择daterangePikcer的日期，都不会有传值到input中，也就是没有办法正常显示选择的日期了，所以要在恰当的时刻，调用$(id).data(‘daterangepicker’).autoUpdateInput=true

[http_www.daterangepicker.com]: http://www.daterangepicker.com/
[http_www.jq22.com_jquery-info14222]: http://www.jq22.com/jquery-info14222
[https_www.cnblogs.com_leijing0607_p_7698414.html]: https://www.cnblogs.com/leijing0607/p/7698414.html
[https_blog.csdn.net_qq_33518042_article_details_77175645]: https://blog.csdn.net/qq_33518042/article/details/77175645