如何为Easepick轻松添加额外类？求助：为预订日期前一日添加myCss类的实现方案

要实现给预订日期的前一日添加myCss类并设置不同颜色，我们可以通过生成目标日期数组 + 利用Easepick的onRenderDay钩子来完成，以下是基于你的代码的完整实现方案：

步骤1：计算所有需要标记的"预订前一日" #

首先我们需要从已有的bookedDates中提取每个预订日期/区间的前一天，把这些日期收集到一个新数组中：

const DateTime = easepick.DateTime;
const bookedDates = [
 '18-08-2022',
 '19-08-2022',
 '20-08-2022',
 '18-09-2022',
 '19-09-2022',
 '20-09-2022',
].map(d => {
 if (d instanceof Array) {
 const start = new DateTime(d[0], 'DD-MM-YYYY');
 const end = new DateTime(d[1], 'DD-MM-YYYY');
 return [start, end];
 }
 return new DateTime(d, 'DD-MM-YYYY');
});

// 新增：计算所有预订日期的前一日
const prevBookedDates = bookedDates.map(item => {
  if (item instanceof Array) {
    // 处理日期区间：取区间开始日期的前一天
    return item[0].subtract(1, 'day');
  }
  // 处理单个日期：取该日期的前一天
  return item.subtract(1, 'day');
});

步骤2：利用onRenderDay钩子添加自定义类 #

Easepick提供了onRenderDay回调函数，它会在渲染日历的每个日期单元格时触发。我们可以在这里判断当前日期是否属于"预订前一日"，如果是就给对应的DOM元素添加myCss类：

const picker = new easepick.create({
 element: document.getElementById('datepicker'),
 css: [
 'https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.0/dist/index.css',
 'https://easepick.com/css/demo_hotelcal.css',
 ],
 zIndex: 10,
 format: "DD MMM YYYY",
 readonly: false, // 注意：原代码重复设置了readonly，这里统一为false
 plugins: ['RangePlugin', 'LockPlugin'],
 // 新增：渲染日期时添加自定义类
 onRenderDay(date, cell) {
   // 检查当前日期是否在预订前一日数组中
   const isPrevBooked = prevBookedDates.some(prevDate => date.isSame(prevDate, 'day'));
   if (isPrevBooked) {
     cell.classList.add('myCss');
   }
 },
 RangePlugin: {
 tooltipNumber(num) {
 return num - 1;
 },
 locale: {
 one: 'night',
 other: 'nights',
 },
 },
 LockPlugin: {
 minDate: new Date(),
 minDays: 2,
 inseparable: true,
 filter(date, picked) {
 if (picked.length === 1) {
 const incl = date.isBefore(picked[0]) ? '[)' : '(]';
 return !picked[0].isSame(date, 'day') && date.inArray(bookedDates, incl);
 }
 return date.inArray(bookedDates, '[)');
 },
 }
});

步骤3：添加自定义CSS样式 #

最后，你需要定义myCss类的样式，来实现不同的颜色效果（可以放在页面的<style>标签中）：

.myCss {
  background-color: #ffd6d6 !important; /* 自定义背景色 */
  color: #c9302c !important; /* 自定义文字颜色 */
  /* 可根据需求添加更多样式，比如边框、圆角等 */
}

额外优化提示 #

• 原代码中重复引入了两次easepick的script标签，建议只保留一次即可，避免冗余加载。
• 原代码中重复设置了readonly属性，建议统一为你实际需要的值。

内容的提问来源于stack exchange，提问作者Leon