All Versions
13
Latest Version
Avg Release Cycle
77 days
Latest Release
-

Changelog History
Page 1

  • v1.3.0 Changes

    โž• Added

    • โšก๏ธ retainEndDateOnFirstSelection prop: You can prevent the endDate from changing for selections when the startDate is updated. Default behaviour is for endDate to reset which is preserved. This prop makes this configurable.
  • v1.2.0 Changes

    โž• Added

    • dayContentRenderer prop: You can control how each date cell is rendered be passing this function that excepts a date and returns what need to be rendered (#242, #384, #476)
  • v1.1.4 Changes

    ๐Ÿ›  Fixed

    • ๐Ÿ”Œ #356: Use babel-plugin-date-fns to reduce bundle size
    • #373, #415, #416: Add missing aria labels
  • v1.0.1 Changes

    February 19, 2020

    ๐Ÿ”„ Changed

    • ๐Ÿ’ฅ BREAKING: 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)

      <CalendardateDisplayFormat='MMM D, YYYY'monthDisplayFormat='MMM YYYY'weekdayDisplayFormat='ddd'dayDisplayFormat='D'/>

    โž• Added

    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.

    ๐Ÿ›  Fixed

    • ๐Ÿšš Works with React 16, without warnings (Deprecated methods are removed: componentWillReceiveProps )
    • IE11 Bug where the last day of each week is not shown.
    • Now infinite scroll mode works as expected.
  • v1.0.0 Changes

    February 19, 2020

    ๐Ÿ”„ Changed

    • ๐Ÿ’ฅ 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) })} //
    />
    
    • ๐Ÿ’… BREAKING: Theming and style approach complately changed. 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';
    
    • ๐Ÿ’ฅ BREAKING: 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/hypeserver/react-date-range/tree/next/src/locale/index.js
      <Calendar locale={turkish} />
    
    • ๐Ÿ’ฅ BREAKING: 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
            }
          }
          */
        }}
      />
    
    • 0๏ธโƒฃ calendars prop renamed as months. And Calendar component is accepting months prop just like DateRange. Default value changed to 1 from 2.

      โœ‚ Removed

    • ๐Ÿšš 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.

    • ๐Ÿšš specialDays prop removed.

    โž• Added

    • disabledDates prop: It's a set of disabled dates.
    • 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.
    • Date range selection by drag.
    • Infinite scroll feature. Sample usage: js const horizontalScroll={enabled: true, monthHeight: 300, monthWidth: 300 }; const verticalScroll={enabled: true, monthHeight: 220, longMonthHeight: 240 }; <DateRangePicker scroll={horizontalScroll} /> <DateRangePicker scroll={verticalScroll} months={2} />
    • 0๏ธโƒฃ showPreview prop added to control visibility of preview. Default value is true.
    • 0๏ธโƒฃ preview prop added: It displays a preview range and overwrite DateRange's default preview. You can set a controlled preview with below shape of object. js { startDate: [Date Object] || null, endDate: [Date Object] || null, color: '#fed14c', }
    • onPreviewChange(date) prop added: Callback function for preview changes. You can set controlled custom previews with preview prop.
    • focusedRange prop added: It defines which range and step are focused. Common initial value is [0, 0]; first value is index of ranges, second value is which step on date range(startDate or endDate).
    • ๐Ÿ‘€ initialFocusedRange prop added: Initial value for focused range. See focusedRange for usage.
    • onRangeFocusChange prop added: Callback function for focus changes by user.
    • dragSelectionEnabled prop added
    • showMonthAndYearPickers prop added
  • v1.0.0-beta2 Changes

    January 21, 2019

    โž• Added

    ๐Ÿ‘Œ Improved predefined date range part to make it accept more than a text label. You can customize your render date range part.

  • v1.0.0-beta Changes

    June 19, 2018

    ๐Ÿ›  Fixed

    • ๐Ÿ›  IE compatibility problem fixed (#208)
    • Wrong form submission prevented for defined ranges
    • ๐Ÿ›  Preview on mouse leave on defined range item is fixed
  • v1.0.0-alpha6 Changes

    May 26, 2018

    ๐Ÿ›  Fixed

    • ๐Ÿ›  Firefox year selection bug fixed (#201)
    • 0๏ธโƒฃ default ranges export fixed (#196)
    • ๐Ÿ›  form submission bug fixed (#198 )
    • ๐Ÿ›  fixed minor localization issue

    โž• Added

    • dragSelectionEnabled prop added (#204)
    • ๐Ÿ‘‰ showMonthAndYearPickers prop added (#206)
  • v1.0.0-alpha5 Changes

    April 25, 2018
    • ๐Ÿ›  fixed shownDate at scrolled calendar
    • โž• added onShownDateChange prop
    • ๐Ÿ”ฆ exposed initialFocusedRange, focusedRange, onRangeFocusChange expose preview, showPreview, onPreviewChange props
    • ๐Ÿ‘‰ showSelectionPreview renamed to showPreview
    • calendar started switch range edges if endDate before startDate
    • ๐Ÿ’… isSunday style removed, isWeekend style added
  • v1.0.0-alpha4

    April 17, 2018