A React component for choosing dates and date ranges.
Added:
Fixes:
Misc:
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.
Added
Improved predefined date range part to make it accept more than a text label. You can customize your render date range part.
BREAKING: Calendar
and DateRange
are now totally controlled components with stateless date management.
BREAKING: React-date-range is no longer use moment out of the box. Input and output values are native Date object. Until v2 version you don't depent on momentjs. You can keep continue to use moment if you want like below
OLD
// this.state.eventDate: momentjs object
<Calendar
date={this.state.eventDate}
onChange={date => this.setState({eventDate: date})}
/>
NEW
<Calendar
date={this.state.eventDate} // js object
onChange={date => this.setState({ eventDate: date })} //
/>
NEW with moment (or any other date libraries)
<Calendar
date={this.state.eventDate.toDate()} // convert moment object to js Date
onChange={date => this.setState({ eventDate: moment(date) })} //
/>
react-date-range
don't use inline styles any more. At the new version you should import skeleton styles and theme styles
// main style file
import 'react-date-range/dist/styles.css';
// theme css file
import 'react-date-range/dist/theme/default.css';
Calendar
and DateRange
Components, no longer support string typed lang
prop.OLD
<Calendar lang="tr" />
NEW
import turkish from 'react-date-range/locale/tr';
// you can view full list in https://github.com/Adphorus/react-date-range/tree/next/src/locale/index.js
<Calendar locale={turkish} />
DateRange
handle range data with ranges:Array
prop instead of startDate
and endDate
props.OLD
<DateRange
startDate={new Date()}
endDate={new Date(2048, 6, 6)}
onChange={ change => {
console.log(change);
/* prints:
{
startDate: Moment,
endDate: Moment
}
/*
} }
/>
NEW
<DateRange
ranges={[{
startDate: new Date(),
endDate: new Date(2048, 06, 06),
key: 'selection',
}]}
onChange={changes => {
console.log(changes);
/* prints
{
selection: {
startDate: Date,
endDate: Date
}
}
*/
}}
/>
calendars
prop renamed as months
. And Calendar
component is accepting months
prop just like DateRange
. Default value changed to 1
from 2
.format
prop removed. No longer accepts string input for Calendar
or DateRange
. You should parse dates like below:
Native js: new Date(dateString)
Date-fns: fns.parse(dateString)
Momentjs: moment(dateString).toDate()
disableDaysBeforeToday
prop removed. use minDate={new Date()}
instead.
firstDayOfWeek
prop removed. It is auto detecting from locale prop.
init
prop removed.
DefinedRanges
component: It's a set of date presets. Receives inputRanges
, staticRanges
for setting date ranges.DateRangePicker
component. It's combined version of DateRange
with DefinedRanges
component. const horizontalScroll={enabled: true, monthHeight: 300, monthWidth: 300 };
const verticalScroll={enabled: true, monthHeight: 220, longMonthHeight: 240 };
<DateRangePicker scroll={horizontalScroll} />
<DateRangePicker scroll={verticalScroll} months={2} />