@atefbena/react-date-range
Advanced tools
Changelog
1.0.0
date-fns
is now loaded as a peerDependency. You can use this plugin with your own project's date-fns
version. However if you want to keep using date-fns versions older than 2.0.0, (minimum version is 2.0.0-alpha.1) you need to pass the following props to your component. (See the reason here, also see this table)<Calendar
dateDisplayFormat='MMM D, YYYY'
monthDisplayFormat='MMM YYYY'
weekdayDisplayFormat='ddd'
dayDisplayFormat='D'
/>
weekStartsOn
prop: You can set the week start day. (Number, 0 - Sunday, 1 - Monday etc.) If not specified, gets the week start day from your locale.
weekdayDisplayFormat
, dayDisplayFormat
and monthDisplayFormat
props: For being able to use different versions of date-fns
startDatePlaceholder
and endDatePlaceholder
props: You can set different placeholders for Date inputs. If not set, falls back to 'Early' and 'Continuous'.
fixedHeight
prop: Set this to true
to prevent height change while selecting different months. Since some months require less than 6 lines to show, by setting this prop, you can force 6 lines for all months.
editableDateInputs
prop: Set this to true
to make the inputs editable. Falls back to false.
DateInput
and InputRangeField
are exported as dedicated components.