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