laydate 的 type="year" 或 type="month" 可直接启用年/年月选择面板,但需配对应 format(如 "yyyy" 或 "yyyy-MM"),value 初始化须为合法日期字符串,change 回调中需同步 val 并移除面板实现“一点即关”,min/max 须匹配 format 格式,移动端推荐 trigger: "focus" 并防抖,type="month" 返回值仍含日,需手动截取。
laydate type="year" 或 type="month" 直接生效
设 type: "year" 就只显示年份选择面板,type: "month" 就只显示年+月面板——不需要封装、不依赖 css 隐藏、也不用监听 click 自行关闭。面板形态完全由 type 决定,这是 laydate 的原生能力。
但必须配 format,否则输入框里显示的值格式会错乱:
-
type: "year"→ 必须写format: "yyyy",返回如"2026" -
type: "month"→ 必须写format: "yyyy-MM",返回如"2026-04"
注意:value 初始化时得是合法日期字符串,比如 value: "2026-04-01"(type: "month" 时),不能传 "2026-04",否则控件可能不渲染或报错。
选完不点“确定”就关闭?靠 change + 手动移除面板
默认行为是:点年份/月份后仍需点“确定”才赋值并关闭。要实现“一点即关”,得在 change 回调里主动清理 DOM:
- 用
lay('#inputId').val(value)同步输入框 - 紧接着执行
$(".layui-laydate").remove()干掉浮层 - 别在
done里做这事——done是点“确定”后才触发
常见错误:在 change 里只改了 val 却没删面板,结果用户再点别的年份,面板还在,值却已变,体验割裂。
min/max 限制年份或年月范围,字符串格式必须匹配 format
比如要限制只能选 2020–2026 年,type: "year" 下就得写:
min: "2020", max: "2026"
而 type: "month" 下,若 format: "yyyy-MM",则必须写完整年月字符串:
min: "2020-01", max: "2026-12"
别传 new Date() 对象或 {year: 2026, month: 3} 这种结构——初始化 render 不认;动态更新也得用 ins.set('min', '2026-04'),不是直接改 ins.config.min。
移动端 trigger 用 focus 更稳,但要注意失焦干扰
安卓微信内置浏览器下,trigger: "click"(默认)容易被软键盘弹出打断面板定位;trigger: "focus" 虽更可靠,但 input 失焦(比如切到别的输入框)会导致面板意外关闭。
实操建议:
- 优先用
trigger: "focus",并在相关事件里加防抖(比如 200ms 内不重复 open) - 避免给同一页面多个
type: "year"或type: "month"控件共用同一个trigger策略,尤其当它们有联动逻辑时
最易被忽略的一点:type: "month" 返回的仍是带日的完整日期字符串(如 "2026-04-01"),不是你想要的纯 "2026-04"。这个转换必须由你手动截取或服务端解析,laydate 不负责语义裁剪。


















