laydate 的 festival 参数必须设为 true 才能显示节日,启用后自动识别中国法定及传统节日并在日期右上角加红点;自定义节日需用 mark,业务规则(放/调休)则用 holidays。
laydate 的 festival 参数必须设为 true 才能显示节日
默认情况下,laydate.render() 不会渲染任何节日信息,哪怕你引入的是最新版(v2.9.9+)。关键开关就是 festival: true 这个布尔值。它不是可选增强项,而是硬性前提。
常见错误是只配了 format 或 range,却漏掉这一项,结果面板里干干净净,连春节、国庆都看不到提示。
-
festival: true启用后,laydate 会自动识别中国法定节假日(如春节、五一、国庆)和传统节日(如端午、中秋),并在日期单元格右上角加一个小红点 - 该功能不依赖外部数据源,所有节日规则已内置在 laydate 源码中,无需手动维护日期列表
- 注意:仅支持公历节日;农历节日(如腊八、小年)不会自动标注,需配合
cellRender自定义实现
节日样式不可直接通过 CSS 类名覆盖,得用 theme 或皮肤机制
很多人想用 .layui-laydate-festival 这类选择器改样式,但实际 DOM 中并不存在这个类——laydate 是用伪元素 ::after 绘制节日标记点的,且没有暴露可配置的 class 名。
如果你需要调整红点大小、颜色或位置,有两个可行路径:
- 使用
theme配置项加载自定义皮肤(例如theme: 'molv'),再在对应皮肤 CSS 文件里修改.layui-laydate-header .layui-icon-festival::after - 直接在全局 CSS 中覆盖伪元素,例如:
.layui-laydate-main .layui-this::after { content: "节"; font-size: 10px; color: #ff5722; }(注意:这种写法在 v2.8+ 中生效,但可能被后续版本内部结构调整影响) - 避免用
!important硬顶,容易和 laydate 内部优先级冲突
自定义节日(如公司周年庆)不能靠 festival,得用 mark
festival: true 只响应内置节日库,对非标日期(比如“2026-04-21 公司成立日”)完全无效。这时候要用 mark 参数做手工标记。
mark 接收一个对象,key 是 YYYY-MM-DD 格式字符串,value 是任意字符串,会作为 tooltip 显示:
laydate.render({
elem: '#test',
festival: true,
mark: {
'2026-04-21': '公司成立日',
'2026-05-20': '产品上线'
}
});
-
mark和festival可共存,互不影响;节日红点照常显示,自定义标记以 tooltip 形式悬浮出现 - value 值支持 HTML 字符串(如
'<b>重点</b>上线'),但需确保内容可信,避免 XSS - 注意:如果 key 日期恰好也是内置节日(如
'2026-10-01'),mark的 tooltip 会覆盖节日默认提示文字
v2.7.3+ 版本的 holidays 不用于显示节日提示,而是控制日期禁用逻辑
看到文档里有 holidays 数组,别误以为它是用来“显示”节日的。它的作用恰恰相反:告诉 laydate 哪些日期要标为“节假日可选”,哪些是“补班日需禁用”。
比如你传入:
holidays: [ ['2026-04-04', '2026-04-05'], // 清明节放假,允许选择 ['2026-04-06'] // 补班日,自动禁用该日期 ]
- 这组配置不会让“清明节”三个字出现在面板上,也不会加红点;它只影响点击交互(是否可选、是否灰显)
- 若你同时开了
festival: true,那'2026-04-04'依然会显示节日红点——这是两套独立机制 - 真正容易混淆的点在于:
holidays里的日期,哪怕没进内置节日库,也不会触发festival的视觉提示
holidays 当成 mark 用,或者以为开了 festival 就能标出所有你想标的日子。记住:内置节日靠 festival,自定义文案靠 mark,业务规则(放/调休)靠 holidays——三者各管一摊,混用就失效。











