Minimalistic date range picker component
The default date range picker component will automatically adjust start time if an earlier end time is selected, and vice-versa.
1const [startDate, setStartDate] = React.useState(new Date())
2const [endDate, setEndDate] = React.useState(new Date())
3
4<DateRangePicker
5 startDate={startDate}
6 endDate={endDate}
7 onChangeStartDate={date => setStartDate(date)}
8 onChangeEndDate={date => setEndDate(date)}
9/>Setting the option "preventWrongTiming" to false allows a "free mode", allowing the component to freely select ranges, including an end date before start date.
An additional option "wrongTimeWarning" can be used to display a warning when the end date is before the start date.
End date is before start date
Prop Name
Type
Default
Required
Description
preventWrongTiming
Boolean
true
No
Wether to correct the end date if it is before the start date and vice-versa.
startDate
Date
Now
No
The start date to display
endDate
Date
Now
No
The end date to display
omitYear
Boolean
false
No
Do now show the year picker.
omitMonth
Boolean
false
No
Do not show the month picker.
omitDay
Boolean
false
No
Do not show the day picker.
allowPast
Boolean
false
No
Allow post dates to be selected.
maxYearsToPast
Number
10
No
How many years in the past to show in the list.
maxYearsToFuture
Number
10
No
How many years in the future to show in the list.