我想禁用今天之前或过去的日期。下面是我如何接近它,但它不起作用。我仍然可以选择今天之前的日期..
日期组件:
type Props = {
onDateChange: Function,
};
type State = {
calendarOpen: boolean,
month: moment,
day: ?moment,
};
export default class AppearDateCalendar extends Component<Props, State> {
state = {
calendarOpen: false,
month: moment(),
day: undefined,
};
componentDidMount() {
document.addEventListener('mousedown', this.handleClickOutside);
}
componentWillUnmount() {
document.removeEventListener('mousedown', this.handleClickOutside);
}
handleClickOutside = (event: SyntheticMouseEvent<EventTarget>) => {
const currentNode = ReactDOM.findDOMNode(this);
if (currentNode && !currentNode.contains(event.target)) {
this.setState({ calendarOpen: false });
}
};
handleCalendarClick = () => {
this.setState({ calendarOpen: !this.state.calendarOpen });
};
handleMonthChange = (_event: any, newMonth: moment) => {
this.setState({ month: newMonth });
};
handleDaySelect = (_event, day: moment) => {
this.props.onDateChange(day);
this.setState({ day, calendarOpen: false });
};
dateDisplayText = (): string => {
if (this.state.day) return this.state.day.format('Do MMM, YY');
return t('choose_date');
};
render() {
const today = new Date();
return (
<div className={cx(css.appearDateCalendar, this.state.calendarOpen ? css.focused : '')}>
<div onClick={this.handleCalendarClick}>
<h5 className={css.heading}>{t('heading')}</h5>
<p className={css.dateText}>{this.dateDisplayText()}</p>
</div>
{this.state.calendarOpen && (
<div className={css.calendarDropdown}>
<DayPicker
disabledDays={{ before: today }}
month={this.state.month}
onInteraction={this.handleDaySelect}
onMonthChange={this.handleMonthChange}
/>
</div>
)}
</div>
);
}
}
所以我使用 disabledDays 道具和设置before:today
。这是这样做的方法还是有更好/正确的方法来解决这个问题?欢迎任何帮助/建议!