layui laydate 不支持原生季度和年度选择,需用 type: "month" 配 format: "yyyy年m季度" 实现季度选择(仅显示1–4月并替换文字),或 type: "year" 配 format: "yyyy" 实现年度选择;返回值仍为标准格式,需前端映射,且必须严格匹配 type 与 format 规则。

layui laydate 本身不直接支持 type: "quarter" 或 type: "yearly" 这类模式,所谓“季度选择”或“年度选择”必须基于原生 type: "month" 或 type: "year" 手动改造,否则面板逻辑、返回值、范围校验都会出问题。
用 type: "month" + 自定义渲染实现季度选择
laydate 没有季度类型,但可复用年月面板,只显示 1–4 月(代表 Q1–Q4),再把“月”文字替换成“季度”:
- 必须设
type: "month"和format: "yyyy年M季度",否则无法触发月级面板 - 在
ready回调里操作 DOM:$(".laydate-month-list li")取前 4 项,把 innerHTML 中的“月”替换成“季度”,其余项style.display = "none" -
value初始化仍需合法日期字符串,如value: "2026-01-01",不能传"2026-Q1" - 选中后返回值仍是
"2026-01"这种格式,前端需手动映射:比如"2026-01"→ “2026年第1季度”
type: "year" 是唯一合法的年度选择入口
想只选年份,必须用 type: "year",不是 type: "date" 配 format: "yyyy" —— 后者仍能点日,且返回值带 -01-01:
-
type: "year"时,format必须是"yyyy",返回值如"2026" -
value可传字符串"2026"、数字2026,或new Date(2026, 0, 1),laydate 会取.getFullYear() - 若要限制可选年份范围,
min/max必须是字符串,如min: "2020"、max: "2030",传new Date()会失效 -
min不影响初始面板位置,哪怕设了min: "2030",首次打开仍显示当前年(2026),得靠value引导
change 回调里别只改 input 值,记得删浮层
默认行为是点完季度/年份还得点“确定”才关闭面板。要实现“一点即关”,必须在 change 里同步两件事:
- 用
lay('#inputId').val(value)更新输入框(注意:value是字符串,如"2026"或"2026-01") - 立刻执行
$(".layui-laydate").remove()干掉浮层;只做第一件事会导致面板残留,用户再点别的年份,输入框值已变但面板还停在原处 - 别用
done回调——它只在点“确定”后触发,达不到“一点即关”效果
真正难的不是怎么写代码,而是记住:所有“非标准类型”(季度、半年度、自定义周期)都只是对 type: "month" 或 type: "year" 的视觉和交互包装,底层校验、返回值、初始化逻辑全得按原生规则来,错配 type 和 format 是最常踩的坑。











