欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

LayUI中的时间日期控件,设置时间范围,过去的时间不能选择,只能选择未来的时间

程序员文章站 2022-05-27 20:31:31
...

默认Layui中的时间控件显示如下:

LayUI中的时间日期控件,设置时间范围,过去的时间不能选择,只能选择未来的时间

我当时系统时间是2018-06-07,大家可以看到,过去的时间还是能选择的。
考虑到项目需求,很大可能选择日期只能是未来的时间。如:还款日期,发布日期,项目上线时间等。

默认显示一个时间框的代码如下:

<input type="text" name="publish_date" id="date" lay-verify="date" placeholder="年-月-日" autocomplete="off" class="layui-input">

相应js如下:

<script>
layui.use(['form', 'laydate',"upload","jquery"], function(){
    laydate = layui.laydate;
    laydate.render({ //发布时间
            elem: '#date'
    });
});
</script>

解决方法

修改相关脚本如下:

laydate.render({ //发布时间
    elem: '#date',
    min:minDate()
});

// 设置最小可选的日期
function minDate(){
    var now = new Date();
    return now.getFullYear()+"-" + (now.getMonth()+1) + "-" + now.getDate();
 }

这样配置之后,只能选择未来的时间点了,同理,要设置可选时间段,只需要配置min:日期,max:日期两个参数即可。

效果如下:

LayUI中的时间日期控件,设置时间范围,过去的时间不能选择,只能选择未来的时间

推广:

专业墙纸贴纸厨房用具装饰出售,本人网店经营,访问即是爱

博客对你有用记得访问下哦,增加下访问量,如有需要可以下单购买哦^_^。https://item.taobao.com/item.htm?id=570637716145