跳转到主内容
websoft网络软件专家 - 深耕网络技术,打造实用软件!

Layui日期选择器如何设置只能选择年份或月份

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"
,则必须写完整年月字符串: 基于Layui自定义内容轮播插件 基于Layui自定义内容轮播插件是一款表格数据为ajax加载的本地json数据,本地查看会有跨域问题导致数据不能显示。 下载
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 不负责语义裁剪。

相关文章