Antd 日历更改月份单元格单击

Question

如果您使用 'antd' 的 Calendar 组件，那么您提到当您单击上个月/下个月的日期时，它会自动更改月份。

如何防止这种行为？ https://ant.design/components/calendar/#header

Answer 1

1. 禁用日期

您可以禁用不在当前月份的日期。 这应该可以防止点击它们。

<Calendar value={selectedDate} disabledDate={disabledDate} />

disabledDate = currentDate => {
  return currentDate.isSame(this.selectedDate, 'month'))
};

2. 防止选择

如果你想要更多的控制。 您可以使用onSelect检查当前选择的日期是否在当月手动设置值。

<Calendar value={selectedDate} onSelect={this.onSelect} />

onSelect = date => {
  if (date.isSame(this.selectedDate, 'month')) {
    this.setState({
      selectedDate: date,
    });
  }
};

笔记

• 在这个例子中使用了dayjs并且假设你遵循了
  如何将日历与自定义日期库（如 dayjs）一起使用