如何配置react-multi-date-picker仅显示天数（忽略年月）

要实现只让用户选择1-31天（无需考虑年月）且支持多选的需求，可以通过以下步骤修改代码：

1. 核心配置调整 #

利用组件内置属性隐藏年月选择器，并限制可选日期范围为某一个有31天的月份（比如1月），确保所有1-31的天数都能完整显示：

<DatePicker
  id={"startDate"}
  className="form-control"
  multiple
  format="DD"
  // 隐藏月份和年份选择器
  hideMonthPicker
  hideYearPicker
  // 隐藏默认的年月导航头部
  hideHeader
  // 限制日期范围为2023年1月1日至31日，确保显示完整31天
  minDate={new Date(2023, 0, 1)}
  maxDate={new Date(2023, 0, 31)}
  // 可选：隐藏星期几的表头，简化界面
  renderWeekDays={() => null}
/>

2. 自定义样式优化 #

添加CSS调整日历布局，让天数展示更直观友好：

/* 移除默认的头部和星期表头 */
.react-multi-date-picker .calendar-header,
.react-multi-date-picker .week-days {
  display: none;
}

/* 调整日期单元格的排列和交互样式 */
.react-multi-date-picker .days-container {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  padding: 8px;
}

.react-multi-date-picker .day {
  padding: 10px 0;
  text-align: center;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.react-multi-date-picker .day:hover {
  background-color: #f0f0f0;
}

.react-multi-date-picker .day.selected {
  background-color: #0066cc;
  color: #fff;
}

配置完成后，组件会仅展示1-31的数字选项，用户可多选任意天数，最终返回的日期格式为你设置的DD（纯天数）。

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