laydate时间控件动态调整最大最小值

最新推荐文章于 2022-01-10 16:46:56 发布

转载最新推荐文章于 2022-01-10 16:46:56 发布 · 2.4k 阅读

学习中。。。专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何在网页中初始化和优化日期选择控件，包括控件声明、初始化过程及赋值逻辑，确保用户选择的日期范围符合业务需求。


首先，声明这个控件
var start_opt = {
    elem : '#startTime',
    type : 'date',
    format : 'yyyy-MM-dd',
    show : true,
    done:function(value){
        $("#form-safety-inspect-${timestamp} #startTime").attr("data-value",value)
    }
};

var end_opt = {
    elem : '#endTime',
    type : 'date',
    format : 'yyyy-MM-dd',
    show : true,
    done:function(value){
        $("#form-safety-inspect-${timestamp} #endTime").attr("data-value",value)
    }
};

第二步，初始化

//初始化时间控件
lay(moduleId + ' .nyrsfm ').each(function(){
    console.info(this)
    let _this = this,
        str = _this.className,
        index = str .lastIndexOf("\ ");
    str  = str .substring(index + 1, str .length);
    if(str == "startTime"){
        $(moduleId + ' .'+str).attr('id', "startTime");
    }else {
        $(moduleId + ' .'+str).attr('id', "endTime");
    }
});

我的话使用的mel模版，所以是循环的两个控件（感觉可以更优化），单个的话可以自己按照自己的初始化

第三步，赋值

这个是我自己的逻辑，就是判断选择的学期开始时间是否小于当前的时间，如果小于那么最小时间就是当前时间
startTime = data.startTime;
if (minTime > startTime){
    console.info("时间最小")
    startTime = minTime
}
endTime = data.endTime;
//这个地方才是重点
$('#startTime').click(function() {
    if ($('#endTime').val() != '') {
        start_opt.max = $('#endTime').val();
    } else {
        delete start_opt.max;//这个必须加，否则后边的设置在页面上不会生效，即使你debug发现你的值已经赋值给组件了
        start_opt.min = startTime;
        start_opt.max = endTime;
    }
    laydate.render(start_opt);//渲染
});

最后：这个方法是在其他地方看到的，加了一些我自己的东西而已，时间有点久了不记得原文的链接了