• 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;

  • 相关阅读:
    php.h: No such file or directory
    检查日期是否为节假日api
    Linux下实现秒级的crontab定时任务
    Apache 两种mpm prefork 和 worker 的区别
    centos6 安装mysql报错Requires: libc.so.6(GLIBC_2.14)
    Yii2 高级模板添加更多Application
    Yii2 assets注册的css样式文件没有加载
    Yii rbac原理和实践
    Yii2 ActiveRecord save失败
    Yii2 手动安装yii2-imagine插件
  • 原文地址:https://www.cnblogs.com/zousaili/p/8268147.html
Copyright © 2020-2023  润新知