Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

dixy

gpbl2SEE LICENSE IN LICENSE0.0.1

Flexible date picker component for React

react, react-component, component, calendar, date-picker, datepicker, date, picker, moment, momentjs

readme

title

screen shot

react-day-picker is a flexible date picker component for React.

Check out the examples to see its features.

npm version Bower build status coveralls Code Climate npm downloads

Quick start

Installing via npm

npm install kat-day-picker --save

Using unpkg CDN

<script src="https://unpkg.com/react-day-picker"></script>

Installing via Bower

bower install kat-day-picker --save

The bower package exposes a global DayPicker variable.

Example

import React from 'react';
import DayPicker, { DateUtils } from "react-day-picker";

function sunday(day) {
  return day.getDay() === 0;
}

class MyComponent extends React.Component {
  state = {
    selectedDay: new Date(),
  }
  handleDayClick(e, day, { selected, disabled }) {
    if (disabled) {
      return;
    }
    if (selected) {
      this.setState({ selectedDay: null })
    } else {
      this.setState({ selectedDay: day });
    }
  },
  render() {
    return (
      <DayPicker
        initialMonth={ new Date(2016, 1) }
        disabledDays={ sunday }
        selectedDays={ day => DateUtils.isSameDay(this.state.selectedDay, day) }
        onDayClick={ this.handleDayClick.bind(this) }
    />);
  }
}

See Basic usage for a deeper explanation of the example above.

Docs and examples

Get support

Contribute

  • File bugs and feature requests in the issues page
  • Check out the source code on Github
  • Pull requests are welcome! If you are planning a pull request with lot of changes, please add an issue to discuss your idea first
    • See how to start the project locally here

changelog

v3.1.1 (2016-10-14)

  • Fixed an issue with IE and older Safari.

v3.1.0 (2016-10-14)

  • New months, weekdaysLong, weekdaysShort, firstDayOfWeek props to localize the component.

Easier localization

With these new props you can localize the Day Picker in a more declarative way. Check out this example.


v3.0.1 (2016-10-14)

  • Fixed a bug with MomentLocaleUtils.

v3.0.0 (2016-10-11)

Breaking changes

For any locale, weekday names must now begin from Sunday, and the first day of week should reflect this change (hence to start from Monday, the first day of week is 1). See this diff as example.


v2.5.0 (2016-10-06)


v2.4.0 (2016-07-31)


v2.3.3 (2016-07-04)

Fixed props warnings in React 15.2.0 (#191).

v2.3.2 (2016-07-01)

Removed superfluous deprecation warnings.

v2.3.0 (2016-06-30)

Deprecation notice

navbarComponent and weekdayComponent props are deprecated. Please use navbarElement and weekdayElement:

- <DayPicker navbarComponent={ MyCustomNavbar } weekdayComponent={ MyCustomWeekday } />
+ <DayPicker navbarElement={ <MyCustomNavbar/> } weekdayElement={ <MyCustomWeekday /> } />

v2.2.0 (2016-06-09)

Added fixedWeeks prop (#176 by fcsonline). Use this prop to always display 6 weeks per month: example.


v2.1.1 (2016-06-06)

Fixed compatibility with IE11 (#175 by davidspiess).

v2.1.0 (2016-06-02)


v2.0.3 (2016-05-24)

Included the dist version in the npm package.

v2.0.2 (2016-05-24)

Fixed a bug when canChangeMonth is set to true (#168).

v2.0.1 (2016-05-15)

Fix npm release.

v2.0.0 (2016-05-15)

This release mainly improves the component’s API (thus some breaking changes) and add some new props.

Code has been split in multiple components and tests have been rewritten with enzyme. It should be easier to add and test the upcoming new features!

Thanks everyone for the support and for the help on making this component better 🤗 If you have issues or suggestions, don't forget the Gitter room!

Breaking changes

  • The onDay* event handlers receive as third argument an object of modifiers instead of an array.

    This mean that if you where writing:

    onDayClick(e, day, modifiers) {
     if (modifiers.indexOf('selected') > -1) {
       console.log('This day is selected')
     }
    }

    you must now write:

    onDayClick(e, day, modifiers) {
     if (modifiers.selected === true) {
       console.log('This day is selected')
     }
    }

    or better:

    onDayClick(e, day, { selected }) {
     if (selected) {
       console.log('This day is selected')
     }
    }
  • Removed onDayTouchTap. Use onDayClick instead. If you need more granularity over touch events, you can use the new onDayTouchStart and onDayTouchEnd props. See #153 for more details.

  • Fixed import with CommonJS modules (#136).

    This affects code using require('react-day-picker').default or similar syntax, which was required for v1.3.0. Now you can require('react-day-picker') as usual, i.e. without specifying default. If you are using ES2015 modules import DayPicker from 'react-day-picker', this change shouldn't affect you.

  • New formatDay function in LocaleUtils.

    If you are using your custom LocaleUtils to localize the calendar, you need to implement this function as well, which is required to format the newly added aria-label attribute (see the documentation for an example). If you are localizing using moment, this change shouldn't affect you.

New props

  • New disabledDays and selectedDays props. They receive a function (day) => Bool as value to easily define which day should have the selected or disabled modifiers. See #34 for more details.

    So if you were writing something like:

    <DayPicker
      modifiers={
        { selected: day => isDaySelected(day) },
        { disabled: day => isDayDisabled(day) }
      }
    />

    now you can write:

    <DayPicker
      selectedDays={ day => isDaySelected(day) }
      disabledDays={ day => isDayDisabled(day) }
    />
  • Added reverseMonths prop to render the most recent month first. (#147 by sonrtomas)

  • Added onDayKeyDown, onDayTouchStart, onDayTouchEnd props.

Improvements

  • Navigate between weeks or years using left/right or up/down arrow keys (#132 by limscoder)
  • Added various aria-* attributes (#132 by limscoder)

Bug fixes

  • Navigation with keyboard when using fromMonth or endMonth

v1.3.2 (2016-04-10)

Adds React 15 to the peer dependencies.

v1.3.1 (2016-03-02)

Fixes an issue causing className being overwritten by className prop (#137).

v1.3.0 (2016-02-18)

Improvements

  • Support for Babel 6 (#90)
  • HTML props are spread to container tag, so to support onBlur, onFocus, etc. (#122, #123)
  • Better RTL support for month navigation (#125)

v1.2.0 (2015-12-04)

New features

  • Use a custom caption element with the new captionElement prop. A custom caption element is useful, for example, to create a year/month navigation as shown in this example. Read #52 for a discussion about this feature.

Improvements

  • Improved navigation when clicking on outside days (#112, see also this example)
  • New addMonths function in DateUtils
  • Added a style definition to package.json (#105, thanks @webbushka)

Fixed bugs


v1.1.5 (2015-11-20)

Fix an issue with showMonth() (#95) – thanks @JKillian

v1.1.4 (2015-11-19)

Minor changes when importing utilities

v1.1.3 (2015-11-12)

Improvements

  • isSameDay in DateUtils now accepts null or undefined arguments
  • Added bower support

v1.1.1 (2015-11-11)

Fix regression The last version was missing an element and this change may have broken existing styles. This fix restore the original behavior adding the element again. (see #82).

v1.1.0 (2015-11-06)

New features


v1.0.10 (2015-10-15)

Let the event from next/previous month click to propagate. #74 (kblcuk)

v1.0.9 (2015-10-12)

Fixed an issue with Daylight Saving Time for some timezones (#71) #72 (gpbl)

v1.0.7 (2015-10-08)

Add support of react-v0.14-rc1 #61

v1.0.6 (2015-10-08)

Fixes a bug causing onCaptionClick to receive always the first month when displaying multiple months #63

v1.0.5 (2015-09-01)

Fixes a bug when passing a new initialMonth prop to the component that may cause an issue when navigating between months [#57]

v1.0.4 (2015-07-29)

Improvement

  • Improve the navigation between months when numberOfMonths is greater than 1 (#37)

Bug fix

  • Months may jump forward when clicking on days when numberOfMonths is greater than 1 (#38)

v1.0.3 (2015-07-25)

v1.0.2 (2015-07-23)

Fixed bugs

  • EnableOutsideDays keeps focus on wrong cell #29
  • October broken on Firefox Nightly #18

v1.0.1 (2015-06-24)

First major release. Please see the updated website for more info.

  • [#27] Removed the dependency from moment.js. Events and props work only with native Date object. To localize the Day Picker with moment.js (or another library), follow this page
  • Class names have been updated (objects are now CamelCase). As example, please see the updated CSS file.
  • [#27] All rendered tags are now div or span. Use CSS to style the daypicker as table.
  • A today modifier is added automatically
  • Event handlers receive the event as first argument. For example: onDayClick(e, day, modifiers) instead of onDayClick(day, modifiers, e)
  • onNextMonthClick and onNextMonthClick props have been removed. Use onMonthChange instead.