反應日期選擇器默認值

Question

`

  <DatePicker
                    dateFormat="dd/MM/yyyy"
                    minDate={subDays(new Date(), 0)}
                    wrapperClassName="date-picker"
                    selected={this.state.from_date}
                    onChange={(date: any) => {
                      this.setState({
                        from_date: date,
                      });
                    }}
                    customInput={<ExampleCustomInput />}
                    dayClassName={() => "example-datepicker-day-class"}
                    popperClassName="example-datepicker-class"
                    todayButton="TODAY"
                  />

`

您好我正在使用 react datepicker，我不想設置默認值，但它仍然具有價值。 請幫忙。

Answer 1

看起來 DatePicker 組件中的 selected prop 被設置為 this.state.from_date，這可能導致設置默認值。 為避免這種情況，您可以嘗試將 selected prop 設置為 null 或您想要用作占位符的其他值，直到用戶選擇日期。 例如：

<DatePicker
  dateFormat="dd/MM/yyyy"
  minDate={subDays(new Date(), 0)}
  wrapperClassName="date-picker"
  selected={this.state.from_date || null}  // use null as placeholder
  onChange={(date: any) => {
    this.setState({
      from_date: date,
    });
  }}
  customInput={<ExampleCustomInput />}
  dayClassName={() => "example-datepicker-day-class"}
  popperClassName="example-datepicker-class"
  todayButton="TODAY"
/>

Answer 2

如果你不想在 React 中為日期選擇器設置默認值，你可以用空值初始化 selected 屬性，如下所示：

import DatePicker from 'react-datepicker';

const App = () => {
  const [selectedDate, setSelectedDate] = useState<Date | null>(null);

  return (
    <DatePicker
      selected={selectedDate}
      onChange={date => setSelectedDate(date)}
    />
  );
}

這將初始化沒有選擇日期的日期選擇器，用戶將不得不手動選擇一個日期。 如果用戶沒有選擇日期，輸入字段將為空。

或者，您也可以將 null 值傳遞給 selected 屬性以初始化沒有選定日期的日期選擇器：

import DatePicker from 'react-datepicker';

const App = () => {
  return (
    <DatePicker
      selected={null}
      onChange={date => console.log(date)}
    />
  );
}