layui表单如何禁止用户手动输入日期

给日期input加readonly属性最直接有效，可阻止手动输入但允许选日期；静态写法为<input type="text" id="date" readonly>，动态设置用document.getElementById('date').readOnly = true，需区分disabled（不提交值）且配合laydate的trigger:'click'和type配置防绕过。

给日期 input 加 readonly 属性最直接

用户能手动输入日期，本质是因为 input 元素没被锁住。Layui 不会自动禁用输入框，必须显式加 readonly。加完后光标还能点进去、内容可复制，但无法修改——这正是业务里“只许选、不许输”的预期行为。

静态写法：<input type="text" id="date" readonly>

动态控制（比如根据状态切换）：document.getElementById('date').readOnly = true;

注意：别和 disabled 混用。disabled 会让字段不参与表单提交，且 Layui 的 form.val() 拿不到它的值；而 readonly 值照常提交，只是不能编辑。

配合 laydate 的 trigger 和 type 防绕过

即使加了 readonly，如果用户双击或按回车仍可能触发键盘输入，得靠 laydate 配置堵死入口：

1. trigger: 'click'：强制只能点图标或输入框区域唤起日历，禁用 focus 触发（避免 Tab 进去后键盘输入）
2. type: 'date' 或 'datetime'：明确类型，避免 laydate 把它当普通文本处理
3. 别设 done 回调去清空手动输入——readonly 已经让输入无效，没必要多此一举

完整初始化示例：

laydate.render({
elem: '#date',
type: 'date',
trigger: 'click',
format: 'yyyy-MM-dd'
});

警惕手动输入绕过和样式错位

有人试过加 onkeydown="return false" 或监听 input 事件删内容，但这些在 Layui 渲染后容易失效——因为 Layui 会接管 DOM 事件流。更糟的是，这类 JS 拦截可能和 laydate 内部逻辑冲突，导致面板打不开或日期格式错乱。

真正要防的不是“技术绕过”（开发者工具改 DOM 总能绕），而是普通用户误操作。所以重点放在两处：

1. HTML 层：确保 readonly 属性存在，且没被 JS 动态移除
2. CSS 层：加 style="background:#f5f5f5; cursor:not-allowed;" 给视觉提示，否则用户可能反复点击以为没响应

如果用了 Layui 表单渲染（form.render()），readonly 不影响它，无需额外 render。

range 模式下左右两个框都要单独处理

范围选择器（range: true）实际是两个独立的 input，Layui 只给它们共用一个配置对象，但 readonly 必须分别加在两个 DOM 上：

HTML 中：<input id="start" readonly><input id="end" readonly>

JS 初始化时，elem 传的是范围容器（如 '#range'），但底层仍需确保每个 input 都有 readonly 属性。

漏掉任意一个，用户就能在那个框里手输日期，而 laydate 对它的校验（比如 min/max）只管点击选择，不管手动输的内容。