Reputation: 11
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