Layui日期组件laydate如何实现根据后端接口动态标记红点日期-Layui教程-PHP中文网

laydate通过ready/change回调结合lay-ymd属性标记待红点日期：先用AJAX获取ISO格式日期数组，转为YYYYMMDD后，在回调中遍历匹配td并添加laydate-day-hint类实现红点。

laydate 怎么加载后端返回的待标记日期数组

laydate 本身不提供「红点标记」能力，但支持通过 ready 和 change 钩子 + 自定义 css 渲染节点。核心是：先用 ajax 拿到带红点的日期列表（如 ["2024-05-10", "2024-05-15"]），再在日历渲染完成后，遍历所有日期单元格，比对并添加红点 dom 元素。

注意：必须等 laydate 实例完全渲染完才操作 DOM，否则找不到目标节点。推荐在 ready 回调中执行标记逻辑，而非 change（后者每次切月都会触发，易重复插入）。

后端接口建议返回 ISO 格式字符串数组（["2024-05-10"]），避免时区/格式歧义
前端需缓存该数组（如挂到实例对象上），供后续切月时复用，避免反复请求
日期比对前统一转为 YYYY-MM-DD 格式（用 laydate.now(0, 'YYYY-MM-DD') 或 new Date().toISOString().slice(0,10)）

如何给指定日期单元格插入红点 DOM

laydate 渲染的日历表格中，每个日期 td 元素带有 lay-ymd 属性，值为 YYYYMMDD（如 20240510）。这是最可靠的选择器依据，比文本匹配或位置索引更稳定。

红点一般用绝对定位小圆点实现，CSS 可复用：

.laydate-day-hint {
  position: relative;
}
.laydate-day-hint::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: #ff5722;
  border-radius: 50%;
  top: 4px;
  right: 4px;
}

JS 插入逻辑示例：

const markedDates = ["2024-05-10", "2024-05-15"];
const ymdList = markedDates.map(d => d.replace(/-/g, ''));

// 在 ready 回调里执行
ready: function(elem, date, endDate) {
  ymdList.forEach(ymd => {
    const td = elem.next('.layui-laydate-main').find(`[lay-ymd="${ymd}"]`);
    if (td.length && !td.hasClass('laydate-day-hint')) {
      td.addClass('laydate-day-hint');
    }
  });
}