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

  • 相关阅读:
    mysql binlog参数设置
    poj 2774 最长公共子--弦hash或后缀数组或后缀自己主动机
    Base64编码和解码算法
    怎样给你的Android 安装文件(APK)减肥
    JAXB 注解
    编程获取linux的CPU使用的内存使用情况
    那么温暖http合约,入门。
    什么是关账?
    经营活动现金净流量与总股本之比和经营活动现金净流量与净资产之比
    P2P风险淮安样本:5000万连锁漩涡牵出银行内案
  • 原文地址:https://www.cnblogs.com/zousaili/p/8268147.html
Copyright © 2020-2023  润新知