layui 设置日期控件不能手动输入，必须选择时间

最新推荐文章于 2025-06-10 10:33:15 发布

原创最新推荐文章于 2025-06-10 10:33:15 发布 · 2.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#layui #javascript #前端

开发日常专栏收录该内容

43 篇文章

订阅专栏

本文介绍了一种使用 HTML 和 JavaScript 实现的只读日期选择器。该选择器通过禁用输入框并利用 laydate 插件实现日期选择功能，同时设置了最小起始时间为当前日期之后的一天。

因为业务需求，只能选择不能输入。

html:
<input type="text" name="end_time" placeholder="结束时间" class="layui-input" id="end_time" onfocus="this.type='text'" autocomplete="off" style="display:inline-block;width:250px;" readonly >

js:
laydate.render({
    elem: '#end_time', //指定元素
    type: 'date',
    trigger: 'click',
    min: '<?php echo date('Y-m-d',strtotime('+1 day'));?>',//最小起始时间
});

爱资料工具-好用的在线工具箱https://www.toolnb.com/