Tanuj0610
Tanuj0610

Reputation: 11

Conditionally add props to React-Datepicker

I want to apply selectsRange prop to react-datepicker only when the viewMode is 'date'

I have done something like

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>

The problem with this is that it is applying the range selection when viewmode is months or years as well. I want only range selection when viewmode is date.

If I do something like below

{...(viewMode === 'date' && { selectsRange: true })}

I get the error below after this in DatePicker entirely

Property 'selectsMultiple' is missing in type '{ children: Element; showMonthYearPicker: boolean; showYearPicker: boolean; placeholderText: string; onClickOutside: () => void; minDate: Date; dateFormat: string; value: string; ... 9 more ...; onInputClick: () => void; }' but required in type 'Pick<Readonly<Omit<{ children?: ReactNode; } & Omit<YearDropdownProps, "date" | "year" | "onChange" | "minDate" | "maxDate"> & Omit<MonthDropdownProps, "month" | "onChange"> & ... 9 more ... & Pick<...>, "dropdownMode" | ... 19 more ... | "onTimeChange"> & ... 4 more ... & { ...; }>, "date" | ... 120 more ... | "onC...'.ts

Upvotes: 0

Views: 53

Answers (0)

Related Questions