jeDate控件开始,结束日期联动有默认值时报错

后台管理系统查询页记录往往伴随着时间间距的查询,而如何对查询时间进行取值限制则涉及到开始,结束时间的联动

官方实例

代码

<span class="datetxt">开始日期:</span><input type="text" class="dateinput dateicon" id="inpstart" readonly>
<span class="datetxt">结束日期:</span><input type="text" class="dateinput dateicon" id="inpend" readonly>
    <script type="text/javascript">
    var start = {}, end = {};
    jeDate('#inpstart',{
        format: 'YYYY-MM-DD hh:mm:ss',
        minDate: '2014-06-16 23:59:59', //设定最小日期为当前日期
        maxDate: function (that) {
            //that 指向实例对象
            return jeDate.valText(that.valCell) == "" ? jeDate.nowDate({DD:0}) : start.maxDate;
        }, //设定最大日期为当前日期
        donefun: function(obj){
            end.minDate = obj.val; //开始日选好后,重置结束日的最小日期
            jeDate("#inpend",LinkageEndDate(false));
        }
    });
    jeDate('#inpend',LinkageEndDate);

    function LinkageEndDate(istg) {
        return {
            trigger : istg || "click",
            format: 'YYYY-MM-DD hh:mm:ss',
            minDate: function (that) {
                //that 指向实例对象
                var nowMinDate = jeDate.valText('#inpstart') == "" && jeDate.valText(that.valCell) == "";
                return nowMinDate ? jeDate.nowDate({DD:0}) : end.minDate ;
            }, //设定最小日期为当前日期
            maxDate: '2099-06-16 23:59:59', //设定最大日期为当前日期
            donefun: function(obj){
                start.maxDate = obj.val; //将结束日的初始值设定为开始日的最大日期
            }
        };    
    }
    </script>

效果
官方实例

实际项目需求:这种效果其实是达到了功能需求的,对开始时间限制在当前日期之前或者是后面结束时间之前,而对结束时间限制在当前时间之前和开始时间之后。但是有一点不好的地方就是刚出来页面的时候输入框没有时间,然后我查找api加上了isinitVal:true,,也就是默认时间。

效果

这里写图片描述

咦,发现是不是出现了默认时间呢,默认时间为当前时间,但是,我在点击的时候竟然出不来日期选择框,同时f12
报错了
这里写图片描述

然后我细细观察,一个一个options 去除观察效果,发现了这里:

maxDate: function (that) {
    //that 指向实例对象
    return jeDate.valText(that.valCell) == "" ? jeDate.nowDate({DD:0}) : start.maxDate;
},

和这里

minDate: function (that) {
    //that 指向实例对象
    var nowMinDate = jeDate.valText('#inpstart') == "" && jeDate.valText(that.valCell) == "";
    return nowMinDate ? jeDate.nowDate({DD:0}) : end.minDate ;
}, 

是因为在初始化的时候start.maxDateend.minDate 不存在的。

然后我改了一下让他不仅不会出这种问题同时还符合我当前的功能需求

jeDate('#inpstart',{
        theme:{bgcolor:"#4aa5ff",pnColor:"#00DDAA"},
        format: 'YYYY-MM-DD hh:mm:ss',
        minDate: '1971-01-01 00:00:00', //设定最小日期
        onClose:false,
        isinitVal:true,       
        maxDate:function (that) {
            //that 指向实例对象       
            var nowMaxDate = ""?jeDate.nowDate({DD:0}):$('#inpend').val();
            return nowMaxDate
        }, //设定最大日期为当前日期
        donefun: function(obj){
            jeDate("#inpend",LinkageEndDate(false));
        }
    });
    jeDate('#inpend',LinkageEndDate);
    function LinkageEndDate(istg) {
        return {
            trigger : istg || "click",
            theme:{bgcolor:"#4aa5ff",pnColor:"#00DDAA"},
            format: 'YYYY-MM-DD hh:mm:ss',
            onClose:false,
            isinitVal:true,
            minDate: function (that) {
                var nowMinDate = ""?jeDate.nowDate({DD:0}):$('#inpstart').val();
                return nowMinDate;
            }, //设定最小日期为当前日期
            maxDate: jeDate.nowDate({DD:0}) , //设定最大日期为当前日期          
        };    
    }

效果

改了的

至此,ok!也算是一个小坑吧,不过我倒是发现jeui还挺不错的,两个独立组件都挺好的;

官网:jeui

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值