jQuery 日历插件：daterangepicker

官网：http://www.daterangepicker.com/

介绍

• jQuery 插件库：http://www.jq22.com/jquery-info14222
• 网友总结参数：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
打开和关闭daterangepicker选择时，是否自动传值到input[text] 这个DOM的属性。
通过设置初始autoUpdateInput为false，可以实现初始值为空，此时 input 中设置的placeholder才能显现出来。
但是设置该属性之后，不管怎么选择daterangePikcer的日期，都不会有传值到input中，也就是没有办法正常显示选择的日期了，所以要在恰当的时刻，调用$(id).data(‘daterangepicker’).autoUpdateInput=true