laydate 自 v2.9.9 起通过 cellRender 配合 this.lunar() 可显示节气,需手动注入节气文本并自定义 CSS;节气仅显示在对应日期格子,依赖农历查表精度,超出内置年份范围(如2100年后)可能为空。
laydate 本身不内置节气计算逻辑,但自 v2.9.9 起支持 cellRender 自定义单元格内容,配合农历转换函数(如 this.lunar()),就能在日期面板中显示节气。关键不是“开启开关”,而是手动注入节气文本。
用 cellRender 渲染带节气的单元格
必须使用 laydate ≥ 2.9.9,且不能只靠 btns: ['lunar'] ——那个按钮只切换面板底部农历信息栏,不修改日历格子本身。
-
cellRender是唯一能改每个日期格子 HTML 的入口,节气得在这里加 - 需自行调用农历转换方法(Layui 内置
this.lunar(ymd)返回含jieqi字段的对象) -
ymd格式必须是'yyyy-MM-dd'字符串,例如'2026-04-20' - 节气名直接取
info.lunar.jieqi,为空字符串则不显示
laydate.render({
elem: '#test1',
format: 'yyyy-MM-dd',
cellRender: function(data) {
const lunar = this.lunar(data.date); // data.date 是 '2026-04-20'
const jieqi = lunar.jieqi || '';
return `
<div class="laydate-cell-main">${data.date.split('-')[2]}</div>
${jieqi ? `<div class="laydate-jieqi">${jieqi}</div>` : ''}
`;
}
});
节气样式需要自己补全 CSS
默认没有 .laydate-jieqi 类,不加样式会导致节气文字挤在日期下方、字号过大或颜色冲突。
- 建议最小字号设为
12px,颜色用浅灰(如#999)避免喧宾夺主 - 加
text-align: center和margin-top: 2px让它居中悬停在日期数字下方 - 若用
theme: 'molv'等主题,注意检查背景色是否与节气文字形成可读对比
节气只显示在当日格子,不会跨格或标在范围选择上
cellRender 每次只处理单个日期,所以“清明”只会出现在 2026-04-04 那一格,不会扩散到前后。
- 范围选择(
range: true)时,中间日期格子仍会正常渲染节气,无干扰 - 如果某天既是节气又是节假日,
mark和cellRender可共存,但需手动合并 HTML 结构 - 节气名是纯文本,不带链接或 tooltip,如需悬停提示,得额外绑定
title属性或用mouseenter监听
this.lunar() 在 Layui 中基于固定查表法,对 2026 年及之前年份准确,但超出其内置年份范围(通常到 2100 年左右)后 jieqi 可能为空——这点容易被忽略,上线前务必用边界日期(如 2099-12-21 冬至)实测。











