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

Question

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

如何防止这种行为？ 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）

Answer 2

您可以在 onSelect 中检查模式，它只能让您控制日期，而不会更改下拉列表中的月份。

 const onSelect = (value, mode) => {
 if (mode.source == "date") {
  // do something
  }
};