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

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

LayUI中的时间日期控件,设置时间范围,过去的时间不能选择,只能选择未来的时间_第1张图片

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

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

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中的时间日期控件,设置时间范围,过去的时间不能选择,只能选择未来的时间_第2张图片

推广:

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

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

你可能感兴趣的:(layui)