日历中 select 单个日期的反应日期解决方案

Question

我正在尝试使用 React-dates 在点击特定日期时突出显示所选日期，但没有得到任何解决方案。我用过：

isDayHighlighted={day1 => returnDates().some(day2 => isSameDay(day1, day2))}

可以正确突出显示日期。但对于特定日期我该怎么做。

Answer 1

如果我理解正确（根据您的评论），您希望在当前显示的月份发生更改时重置所选日期。

您可以挂钩 onNextMonthClick 和 onPrevMonthClick 并将日期设置为 null。

Running example

class App extends React.Component {
  state = { date: null, focused: false };

  onDateChange = date => {
    this.setState({ date });
  };

  onFocusChange = ({ focused }) => {
    this.setState({ focused });
  };

  resetDate = () => {
    this.setState({ date: null });
  };

  render() {
    const { focused, date } = this.state;
    return (
      <div>
        <h1>React Dates Test</h1>
        <SingleDatePicker
          date={date}
          focused={focused}
          numberOfMonths={1}
          onDateChange={this.onDateChange}
          onFocusChange={this.onFocusChange}
          onNextMonthClick={this.resetDate}
          onPrevMonthClick={this.resetDate}
        />
      </div>
    );
  }
}

日历中 select 单个日期的反应日期解决方案

react-dates solution to select single date from calendar

javascript

reactjs

react-dates