最直接有效的方法是给 input 添加 readonly 属性并设置 laydate 的 trigger 为 'click';readonly 阻止键盘弹出但保留焦点和触发能力,trigger: 'click' 确保面板稳定显示,避免闪退。
给 input 加 readonly 属性是最直接有效的办法
移动端点击 input 默认唤起系统键盘,而 laydate 本身不接管输入行为——它只负责弹出日历面板。只要不让浏览器认为这个输入框可编辑,键盘就不会出来。
关键不是改 laydate 配置,而是控制原生 input 的行为:
-
readonly属性能阻止键盘弹出,同时保留 focus 和 laydate 的触发能力 - 千万别用
disabled,它会让 laydate 失效(控件无法获取焦点) - 如果页面有表单校验逻辑依赖
required,readonly不影响其校验,但值提交时仍会带上
HTML 示例:
<input type="text" id="birthDate" class="layui-input" readonly>
trigger: 'click' 必须配合同步使用
只加 readonly 还不够。某些安卓 WebView 或 iOS Safari 在 input 失去焦点后,laydate 面板会瞬间闪退——因为默认的 focus 触发方式在移动端不可靠。
必须显式指定触发方式为 click:
-
trigger: 'click'让 laydate 绑定到元素的 click 事件,绕过 focus 流程 - 即使 input 是
readonly,click 事件仍能正常捕获 - 不加这一项,部分机型(尤其 OPPO、vivo 的旧版浏览器)会出现“点一下,面板闪一下就消失”
JS 示例:
laydate.render({ elem: '#birthDate', type: 'date', trigger: 'click' });
弹出层(layer.open)里渲染 laydate 容易漏掉重渲染
如果日期控件放在 layer 弹窗里,且弹窗是动态加载或反复打开的,常见问题是:第一次能用,第二次点不动或一闪而过。
根本原因不是配置错,而是 laydate 实例没销毁或重复绑定:
- 每次打开弹窗前,不要重复调用
laydate.render(),否则多个实例监听同一元素,行为紊乱 - 推荐做法:在
success回调里先检查是否已渲染,或统一用laydate.destroy(elem)清理再 render - 更稳妥的是把 render 放在弹窗 DOM 插入完成之后(比如
layer.ready或$(...).html(...).promise().done(...)后)
别信“用 CSS 隐藏键盘”的野路子
有人试过 input { position: absolute; left: -9999px; } 或 opacity: 0 来躲键盘,这会导致 laydate 找不到有效位置锚点,面板偏移错乱甚至不显示。
也有人试图用 blur() + setTimeout 强制收键盘——但 laydate 面板依赖 input 的 focus 状态做定位计算,中途 blur 会中断整个流程。
真正稳定的做法只有两个动作:加 readonly + 设 trigger: 'click'。其他任何绕开这俩的方案,在不同机型上大概率翻车。











