有条件地向React-Datepicker添加props

Question

我想仅当 viewMode 为“日期”时才将 selectsRange 属性应用于react-datepicker

我做过类似的事情

type ViewMode = 'date' | 'month' | 'year';
const [viewMode, setViewMode] = useState<ViewMode>('date');
<DatePicker
      selected={tempFromDate}
      onChange={(dates: [Date | null, Date | null]) => {
        const [start, end] = dates;
        setTempFromDate(start);
        setTempToDate(end);
      }}
      startDate={tempFromDate || undefined}
      endDate={tempToDate || undefined}
      open={isFromPickerOpen}
      onInputClick={() => setIsFromPickerOpen(true)}
      {selectsRange} // this I want to be conditional
      showMonthYearPicker={viewMode === 'month'}
      showYearPicker={viewMode === 'year'}
      placeholderText="From"
      onClickOutside={() => setIsFromPickerOpen(false)}
      minDate={new Date('01-01-1990')}
      dateFormat="dd/MM/yyyy"
      value={tempFromDate ? tempFromDate.toLocaleDateString() : ''}
      renderCustomHeader={....}
      onSelect={(date: Date | null) => {           
        if (viewMode === 'month') {
          setViewMode('year');
        } else if (viewMode === 'year') {
          setViewMode('date');
        }
      }}
    >
      <ButtonContainer>
        <button onClick={handleFromDateOkClick}>OK</button>
        <button onClick={handleFromDateCancelClick}>Cancel</button>
      </ButtonContainer>
    </DatePicker>

这样做的问题是，当视图模式为几个月或几年时，它也会应用范围选择。当视图模式为日期时，我只想选择范围。

Answer 1

selectsRange={viewMode === '日期'}