daterangepicker 设置默认值为空(转)

小灰灰 2021-09-18 15:00 753阅读 0赞

# [api 介绍][api] #

# [JS Bootstrap-DateRangePicker 如何设置默认值为空][JS Bootstrap-DateRangePicker] #

DateRangePicker是一款时间范围选择器，界面良好，非常适合短时间范围选择的插件，具体源码可以在http://www.daterangepicker.com/找到

，但是目前使用中，感觉功能不甚齐全，所以将遇到的问题和解决方法记录下来。

**1无法默认值为空**

DateRangePicker可以通过在初始化时设置startDate和endDate属性，来实现设置初始默认值。其中可以引用moment这一款专门针对date的时间管理插件，例如使用options.startDate=moment() 设置初始默认值为当前时间

但是当想设置初始默认值为空时，即使设置startDate和endDate为 ' '也不行，会提示日期格式不对，无法实现。

所以，在此我们可以使用autoUpdateInput属性，autoUpdateInput是用来打开和关闭daterangepicker选择时，是否自动传值到input\[text\] 这个DOM的属性，通过设置初始autoUpdateInput为false，可以实现初始值为空，这是在input中设置的placeholder才能正常显现出来。

但是设置该属性之后，不管怎么选择daterangePikcer的日期，都不会有传值到input中，也就是没有办法正常显示选择的日期了，所以要在恰当的时刻，调用$(id).data('daterangepicker').autoUpdateInput=true,就可以了。

作者最初设置为，最初默认值为空，当daterangepicker 的input发生点击时，autoUpadateInput=true，但是这时出现input不管是否选中日期，都会自动有值，所以为了修改这个问题，我在daterangepicker的源码中进行了修改，当然也可以重新更改需要的onclick事件。

在源码中，当autoUpdateInput设置为false之后，我们想要在点击确定，选中日期和点击range三个地方，将autoUpdateInput改变回来，所以，在三处设置了this.autoUpdateInput=true属性，

在

在1207行左右，clickrange函数中，当点击选择了range时，改变autoUpdateInput属性，在else中加入，是因为当选择自定义标签时，如果没有选择日期，依旧不改变默认值。选择日期的改变，在后文所示。

\} else if (!this.endDate && date.isBefore(this.startDate)) \{  
            this.autoUpdateInput=true;  
                //special case: clicking the same date for start/end,  
                //but the time of the end date is before the start date  
                this.setEndDate(this.startDate.clone());  
            \} else \{ // picking end  
            this.autoUpdateInput=true;  
                if (this.timePicker) \{

在1335行左右，clickdate函数中，当点击选择了enddate也就是完整的选择了日期时

\} else if (!this.endDate && date.isBefore(this.startDate)) \{  
            this.autoUpdateInput=true;  
                //special case: clicking the same date for start/end,  
                //but the time of the end date is before the start date  
                this.setEndDate(this.startDate.clone());  
            \} else \{ // picking end  
            this.autoUpdateInput=true;  
                if (this.timePicker) \{

在1400行左右，还有一种情况，就是当有时分秒的时间显示时，有可能用户会直接点击确认，或更改时分秒，来选择日期，所以在clickapply函数中，也改变autoUpdateInput值

clickApply: function(e) \{  
        this.autoUpdateInput=true;

转自 [https://blog.csdn.net/weixin\_42979149/article/details/84786878][api] 和 [https://www.cnblogs.com/zousaili/p/8268147.html][https_www.cnblogs.com_zousaili_p_8268147.html]

[api]: https://blog.csdn.net/weixin_42979149/article/details/84786878
[JS Bootstrap-DateRangePicker]: https://www.cnblogs.com/gtlm/p/7719739.html
[https_www.cnblogs.com_zousaili_p_8268147.html]: https://www.cnblogs.com/zousaili/p/8268147.html