嘿，我来帮你搞定Date Picker的自定义UI和特定日期样式的问题！下面分两部分给你拆解：

不同技术栈的实现方式略有差异，我分原生Web和主流组件库两种场景给你举例：

1. 原生HTML Date Picker #

原生Date Picker的样式虽受浏览器限制，但通过CSS伪元素能做不少定制：

/* 自定义输入框基础外观 */
input[type="date"] {
  padding: 8px 12px;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  font-size: 16px;
  color: #333;
  background-color: #f9f9f9;
}

/* 修改右侧日历图标样式 */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.5); /* 调暗图标色调 */
  cursor: pointer;
  padding: 2px;
}

/* 自定义日期选择面板的年月文字样式（部分浏览器支持） */
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
  color: #2196f3;
  font-weight: bold;
}

注意：原生样式的兼容性因浏览器而异，如果需要跨浏览器统一效果，更推荐用第三方组件库。

2. 主流组件库（以React-Datepicker为例） #

像React-Datepicker这类组件本身支持高度自定义，你可以通过自定义className、styled-components或者组件提供的props调整：

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import styled from "styled-components";

// 用styled-components封装自定义样式
const StyledDatePicker = styled(DatePicker)`
  .react-datepicker-wrapper {
    input {
      padding: 8px 12px;
      border: 2px solid #e0e0e0;
      border-radius: 6px;
      font-size: 16px;
    }
  }
  .react-datepicker {
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-radius: 8px;
  }
  .react-datepicker-header {
    background-color: #2196f3;
    color: white;
    border-radius: 8px 8px 0 0;
  }
`;

// 使用自定义后的组件
function CustomDatePicker() {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <StyledDatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
    />
  );
}

这部分核心是识别目标日期，再给它们单独绑定样式，同样分场景举例：

1. 原生场景（需手动渲染日历） #

原生Date Picker没法直接给特定日期加样式，通常需要自己实现日历组件或用第三方日历库，这里给你核心判断逻辑：

// 判断是否为周末
const isWeekend = (date) => {
  const day = date.getDay();
  return day === 0 || day === 6; // 0是周日，6是周六
};

// 节假日数组（格式统一为YYYY-MM-DD）
const holidays = ["2024-01-01", "2024-02-10", "2024-04-04"];

// 判断是否为节假日
const isHoliday = (date) => {
  const dateStr = date.toISOString().split("T")[0];
  return holidays.includes(dateStr);
};

// 渲染日历时给符合条件的日期加类名
function renderCalendarDay(date) {
  let className = "calendar-day";
  if (isWeekend(date)) className += " weekend";
  if (isHoliday(date)) className += " holiday";
  
  return `<div class="${className}">${date.getDate()}</div>`;
}

对应的CSS样式：

.calendar-day.weekend {
  color: #ff9800;
  font-weight: bold;
}
.calendar-day.holiday {
  background-color: #ffebee;
  border-radius: 50%;
}

2. 组件库场景（以React-Datepicker为例） #

React-Datepicker提供了renderDay属性，允许你自定义每一天的渲染逻辑：

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

const holidays = ["2024-01-01", "2024-02-10", "2024-04-04"];

const renderCustomDay = (day) => {
  const dayStr = day.toISOString().split("T")[0];
  const isWeekend = day.getDay() === 0 || day.getDay() === 6;
  const isHoliday = holidays.includes(dayStr);
  
  let className = "custom-day";
  if (isWeekend) className += " weekend-day";
  if (isHoliday) className += " holiday-day";
  
  return <div className={className}>{day.getDate()}</div>;
};

function DatePickerWithCustomDays() {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      renderDay={renderCustomDay}
      calendarClassName="custom-calendar"
    />
  );
}

对应的CSS：

.custom-calendar .weekend-day {
  color: #f44336;
}
.custom-calendar .holiday-day {
  background-color: #e3f2fd;
  border-radius: 50%;
}

如果用Vue的Element-UI，思路类似：通过cell-class-name属性返回对应类名即可，判断逻辑和上面一致。

总结一下，核心就是先通过JS判断日期是否为周末/节假日，再通过CSS类名应用样式；整体UI自定义则根据技术栈选择原生CSS伪元素或组件库的自定义API实现。

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