zoukankan      html  css  js  c++  java
  • 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;

  • 相关阅读:
    高斯消元
    逻辑运算符之优先级&&and、or
    康托展开
    关于bootstrap的双层遮罩问题
    写好页面在内网内访问
    swiper插件的一些坑
    第一篇博客
    poj 3415 Common Substrings
    poj 1509 Glass Beads
    poj 3260 The Fewest Coins
  • 原文地址:https://www.cnblogs.com/zousaili/p/8268147.html
Copyright © 2011-2022 走看看