gpbl/react-day-picker

DayPicker is a customizable date picker component for React. Add date pickers, calendars, and date inputs to your web applications.

React DayPicker

DayPicker is a date picker component for React. Renders a monthly calendar to select days. DayPicker is customizable, works great with input fields and can be styled to match any design.

➡️ react-day-picker.js.org for guides, examples and API reference.

Main features

• ☀️ Select days, ranges or whatever
• 🧘‍♀️ using date-fns as date library
• 🌎 Localizable into any language
• ➡️ Keyboard navigation
• ♿️ WAI-ARIA support
• 🤖 Written in TypeScript
• 🎨 Easy to style and customize
• 🗓 Support multiple calendars
• 📄 Easy to integrate input fields

Installation

npm install react-day-picker date-fns  # using npm
pnpm install react-day-picker date-fns # using pnpm
yarn add react-day-picker date-fns     # using yarn

Example

import { useState } from 'react';
import { format } from 'date-fns';

import { DayPicker } from 'react-day-picker';
import 'react-day-picker/dist/style.css';

export default function Example() {
  const [selected, setSelected] = useState<Date>();

  let footer = <p>Please pick a day.</p>;
  if (selected) {
    footer = <p>You picked {format(selected, 'PP')}.</p>;
  }
  return (
    <DayPicker
      mode="single"
      selected={selected}
      onSelect={setSelected}
      footer={footer}
    />
  );
}

Documentation

See react-day-picker.js.org for guides, examples and API reference of the latest version. Docs for version 7 are at react-day-picker-v7.netlify.app.

react-day-picker's Issues

Bower Support

Although not ideal, I'm in a situation where installing the package via NPM doesn't meet my use case as we're not using browserify, webpack or anything like that. Is there a current usage story for using this via bower? If not, would you be interested in a contribution to make it more bower friendly?

1.1.0 is a breaking change

Renaming Util to Helper (on 0eee2ec) and then eventually to dateUtils (on f555948) is a breaking change according to semver.

The latest version should be at least 2.0.0.

Add tests

Expose some useful date utilities

The idea is to export some of the internal functions that could be useful when writing modifiers:

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

e.g. isSomeDay (#75), rangeOfDays (#47), isDayOutsideMonth, isPastDay, isDayBetween, etc.

New captionElement prop

If specified, the value of this prop replaces the caption element (example).

Call stopPropagation on nativeEvent on next and previous month click

In handleNextMonthClick and handlePrevMonthClick event propagation is not being stopped because stopPropagation is being called on the synthetic event, not on the native event.

https://github.com/gpbl/react-day-picker/blob/master/src/DayPicker.js#L58 and https://github.com/gpbl/react-day-picker/blob/master/src/DayPicker.js#L70 should be:

e.nativeEvent.stopPropagation();

Alternatively, you could pass the event to the onNextMonthClick callback (as you do with onDayClick) and let the component user decide whether to stop propagation or not. I'd be happy to PR either fix. Let me know which you prefer.

onCaptionClick in multi month mode

It would be nice if second param for onCaptionClick in multi month mode will be the date of real clicked month, not initial.

iPhone 6+ iOS 8.x safari bug

Hello, I don't know if you are aware of this, but currently there's a bug where people are missing days on the picker on Safari iOS 8.x and the month of October. I'm not sure if this happens with all devices but a friend told me that is happening on an iPhone 6+ and occurs every year in different ways. The problem is that It only happens on the physical device not in the iOS emulator so I can't reproduce it on my own. Here are two screenshots showing the problem. The bug occurs also with the picker on http://www.gpbl.org/react-day-picker/ so that's why I'm posting this.

missing October 1st on 2017

missing October 2nd 2016

I hope this is useful, I don't know how can I do to help right now.

DayPicker-Weekdays should have a table-row as child

As pointed out by @nkbt, this commit broke some styles, so the proposed solution by @jkillian is to remove display: table-row in the CSS.

However it is preferred to have a table-row inside DayPicker-Weekdays, which is a table-header-group.

So we should revert that commit and restore the surrounding div. This div was however missing a className, thus the confusion that lead to this problem: I'd assign to this element the DayPicker-Weekdays-row class.

Use onMouseDown instead of onClick to allow usage of blur for input

Now it is using onClick when clicking a day. onClick fires AFTER blur so if you want to use an input and have a blur event on that (to close the cal) the blur event fires before the onClick can fire.

By changing this to use onMouseDown you can have both

Reduce moment dependency by using native Date objects (breaking change)

My plan to move away from moment.js didn't work, basically because I couldn't find any valid alternative for supporting multiple locales (see #2). I'd like, at least, to reduce the use of moment.js by doing the following:

• Rewrite CalendarUtils to work with javascript's Date. A well written utility doing similar things is this one from material-ui. This choice implies that the day picker will accept and return only Date objects.
• Move momentjs-related functions into an external util, so it will be easy to replace it as I find a better solution for replacing moment.js. Developers could provide their own utility using webpack's NormalModuleReplacementPlugin. Those functions are just to format dates to strings and to know the first day of the week.

Next and previous Month doesn't work without react-tap-event-plugin installed

No click event exist for this actions.
https://github.com/gpbl/react-day-picker/blob/master/src/DayPicker.js#L96-L103

It's maybe not necessary to fix it but maybe amending the doc to say that react-tap-event-plugin is required.

Otherwise I really like the work that you have done with with calendar component, it leave loads of room for flexible behavior.. Exactly what I needed. Thanks

Animation when changing months

The input's date picker in Chrome has a nice animation when browsing between months. I'd like to add something similar to the react-day-picker:

• it wouldn't work with numberOfMonths greater then 1
• it should be optional, e.g. by setting a new prop animate

Move example app out of the main module

Use div's instead of tables (breaking change)

OSX: click on month change element highlights content

OSX 10.10.3
Chrome 43.0.2357.130 (64-bit)

gif:

Improve keyboard navigation

We can adopt these conventions (follow up from this comment).

Add tests to the example app

Clicking days on a calendar with multiple months makes it jump forward

For example, in the Range of days example when clicking on a day on the right month, it makes it jump to the next month.

Move /lib/addons to /addons

E.g. to keep consistency with react/addons.

Special modifiers: disabled and selected

It is very common for a date picker to work with selected and disabled days. While it is already possibile to implement disabled and selected modifiers, we could give them a special treatment to change the component's behavior. Example:

• if provided, they may add the aria-selected and aria-disabled attributes (see #33)
• the disabled modifier may also prevent to attach click or touchtap events to those days
• we could implement them as prop (shortcut for the modifiers prop):

// will add the `selected` modifier for the selected day
<DayPicker selected={ day => isSameDay(this.state.selectedDay) } />

// will add the `disabled` modifier to sundays
<DayPicker disabled={ day => day.getDate() === 6 } />

Allow renderDay prop to render the whole day cell

From this comment: we can change renderDay to render the whole day cell, not just its content.

New props: `fromMonth` and `toMonth`

These new props should restrict the navigation between the two specified months, or up to toMonth or from fromMonth.

Examples:

// Users can't browse months before sept 2015 or sept 2016
<DayPicker fromMonth={ new Date(2015, 8) } toMonth={ new Date(2016, 8) } />

// Users can't browse months after sept 2016
<DayPicker toMonth={ new Date(2016, 8) } />

// Users can't browse months before sept 2016
<DayPicker fromMonth={ new Date(2016, 8) } />

When one of those props are specified, the navigation button should hide accordingly and the keyboard navigation should be stopped.

add support for changing years

It would be nice if we could switch the years somehow, without spamming the next/prev month links.
Either an extra pair of <</>> where the next/prev months are, or maybe a select box for years in the caption, or even a click on the caption to show an year sort of calendar (with just clickable years).
Something like:

| 2011 | 2012 | 2013 |
| 2014 | 2015 | 2016 |
| 2017 | 2018 | 2019 |

June 2015 is showing 6 weeks instead of 5

Hi all,

Please see attached image:

bug: enableOutsideDays keeps focus on wrong cell

To repro

1. set enableOutsideDays to true
2. click on an outside day

What happens

The cell that you clicked on retains focus

What should happen

The the selected cell moves when the month changes. Focus should move with it.

October broken on Firefox Nightly

Steps to reproduce:

1. Download and install Firefox Nightly 40.0a1 (2015-04-29) (mac osx 10.9.5)
2. Open the demo page at http://www.gpbl.org/react-day-picker/
3. Navigate to October 2014, or October 2015 or October 2016

Expected results:

• A nice looking calendar for that month

Actual results:

• The 4th line duplicates the 3th line and then extends 6 more days missing one, example (October 2014): 12, 13, 14, 15, 16, 17, 18, 20, 21, 22, 23, 24, 25

Add ARIA attributes for better accessibility

While react-day-picker works with the keyboard, its semantics could be improved by adding the appropriate ARIA attributes, so screen readers will better interpret how the component works.

Probably the best React exemplar I've found which achieves this nicely is react-widgets Calendar. However, I see the customizability of the react-day-picker project being much more ideal. I really like the clean, small ES6 implementation with no dependencies outside of React.

The following are some suggestions based on my research. Some suggestions are a result of adding back certain semantics which were lost due to switching from <table> to <div>. Suggestions are organized by the element to which it affects, identified by its class name.

.DayPicker-Month

• Add role="grid" attribute; grid cells need an ancestor grid.

Authors MUST ensure that elements with role gridcell are owned by elements with role row, which in turn are owned by an element with role rowgroup, grid or treegrid.

• Add aria-readonly="true" attribute to indicate that the child grid cells will never be edited; by default, grid cells are assumed to be editable.

A grid is considered editable unless otherwise specified. To make a grid read-only, set the aria-readonly attribute of the grid to true. The value of the grid element's aria-readonly attribute is implicitly propagated to all of its owned gridcell elements, and will be exposed through the accessibility API.

• Add aria-labelledby attribute to explicitly indicate the .DayPicker-Caption element is labeling the month grid.
• Add aria-activedescendant attribute to explicitly indicate which .DayPicker-Day is in focus.

.DayPicker-Caption

• Add unique id to work with .DayPicker-Month enhancements.

.DayPicker-Weekdays

• Add role="rowgroup" attribute, which is equivalent to using <thead> element.

.DayPicker-Weekday

• Add role="columnheader" attribute, which is equivalent to using the <th> element.

.DayPicker-Body

• Add role="rowgroup" attribute, which is equivalent to using <tbody> element.

.DayPicker-Day

• Add unique id to work with .DayPicker-Month enhancements.
• Add aria-disabled="true|false" attribute to indicate if the cell is selectable; this suggests that not every day within a given range of dates has to be selectable.
• Add aria-selected="true|false" attribute to indicate if the cell is selected.

gridcell elements with the aria-selected attribute set can be selected for user interaction

• Add title="Today" attribute to a day which is today; if not wanting the tooltip to appear, then use aria-label="Today" attribute. Alternatively, this suggestion could be implemented via a custom day component, rather than in this project.

Additional considerations

Since aria-labelledby and aria-activedescendant reference an id, it may be good to dynamically generate unique ids for elements they reference, so you avoid the problem of having different instances of react-day-picker accidentally cross-reference each other.

Few failing tests

Noticed a few tests are currently failing (at least for me):

Daypicker

• does not render outside days
• renders outside days when required
• adds an outside modifier to outside days
• changes the month when calling showMonth

Utils

• getWeekArray
  • works with a month starting on sunday (en)
• isDayOutsideMonth
  • detects days outside a month
  • does detect days inside a month

work without npm, grunt and all that stuff

HI There,

How Can I make this work without any of those fancy node.js dependencies.
I'm new to react. Im just including the standard react.js file in my html file. I'm although using the JSX transformer (which I will get rid of later).
I just want to drop the js files (DayPicker.js and utils.js) and possibly moment.js (I noticed you wrote in a issue that it's not strictly required).

I took out the export and import statements from the Daypicker and utils file but it still isn't working.

Update example app for v1.0.0

With multiple calendars, navigation actions skip 'numberOfMonths'

For example, if numberOfMonths=2, and initialMonth is 'June'. Navigating through calendar with next/prev month show only pair of mounts ['June', 'July'], ['August', 'Sept'], ['Oct', 'Nov'] and etc. But not ['July', 'Aug'] or ['May', 'June'].

Try navigation at http://www.gpbl.org/react-day-picker/ Range of days example.

Allow user to hide the current month

A user of this component could hide the arrows of this calendar (allow change month)
If this user whants to use it's own header, it would be nice to allow him to remove the whole Month name.

Not quite sure it's a good idea.

Upgrade for React 0.13

Example code should run on ES6

Function for selecting range of days

The range example includes some code that could be useful to put in an addon.

Improve handling of focus

Currently, when tabbing into the widget, focus gets placed on .DayPicker[role="widget"]. Then, if tabbing forward, the first .DayPicker-Day in a month gets focus. Then, if tabbing forward again, the first .DayPicker-Day in the next month gets focus.

Following conventions, tabbing switches focus among widgets, it doesn't change focus within a widget. Rather, you use other keys (arrow, space, enter) to navigate within or control a widget.

Therefore, if sticking with the current strategy for managing focus (i.e. managing focus among descendants, instead of using aria-activedescendant), the tabindex attribute should be removed from .DayPicker[role="widget"] and only one focusable .DayPicker-Day in the widget should ever be in focus. The last .DayPicker-Day in focus (i.e. last active descendant) should be maintained, so if the user tabs out of the widget and back in, they immediately focus back on the same descendant they last were on.

References

• 3.1.2. Keyboard Navigation between Widgets
• 3.1.3. Keyboard Navigation within Widgets

Add focus modifiers

Add .DayPicker--focus and .DayPicker-Month--focus class modifiers to visually indicate when the widget and respective month has a focused descendant. These aren't necessary, but it could assist users and provide additional style hooks, if desired.

This issue is probably more sensible if the suggestions in #43 are resolved.

References

• 3.2.5. Managing the Perception of a Dual Focus

DatePicker without browserify

I have gotten your component to work without grunt, npm etc: #8

It works well except the css does not seem to apply properly.

1. In your dist/Daypicker.js

Change require(React) to global.React;
Change require(moment) to global.moment;

That way you can use react and moment from the global scope.

2. Export Datepicker to global scope

global.DayPicker = DayPicker; (after var DayPicker = React.createClass ...)

3. Modify asset/left.svg -> Remove sketch:type="MSShapeGroup" (Causes XML Parse errors)

Support rendering multiple months at the same time

Would you be open to a PR that added support for rendering multiple months side-by-side?

New labels prop

A labels prop may help to implement title and aria-label attributes (see #33). Example:

// default labels
let labels = { "today": "Today" }
<DayPicker labels={labels} />

// localized, modifier specific labels
let modifiers = { "weekend": day => day.getDate() === 5 || day.getDate() === 6 }
let labels = { "weekend": { en: "Weekend", it: "Fine settimana", de: "Wochenende" }
<DayPicker labels={labels} modifiers={modifiers} />

Question: Select multiple days?

This looks like a fantastic component but it's missing one feature that I really need. I know, I don't want to be that guy asking "hey can you implement this because I need it?" but I figured I'd ask to see if its even remotely possible. I'm wanting to select multiple separate days (like Kalendae allows in the Multi-Select demo). Is this possible with this component?

Merge object passed to `localeUtils` with Utils

Require react-tap-event-plugin in examples

In the example code for Input Fields and Range of Days you missed to require the react-tap-event-plugin as you use onDayTouchTap.

Add support for CSS modules

API proposal

• a new prop classNames receiving an object containing the class names for the single elements, such as container, day, caption, ecc. Must be validated via PropTypes.
• modifiers passed to the modifiers prop must return a string instead of a boolean. This string will be added to the day's cell class name. For CSS modules, it should be the imported class name.
  • if the returned value is falsy, no class name will be added to the day cell.

Note that this change would work also for any class names, e.g. people adopting other convention than BEM can specify their own class names.

Example using CSS Modules

import classNames from './daypicker.css';
import { todayClassName, weekendClassName } from './daypicker-modifiers.css';
import { isToday, isWeekend } from './myDateUtils';

const modifiers = {
  today: day => {
    if (isToday(day)) {
      return todayClassName;
    }
    return '';
  },
  weekend: day => {
    if (isWeekend(day)) {
      return weekendClassName;
    }
    return '';
  },
};

function MyComponent() {
  return (
    <div>
      <DayPicker classNames={classNames} modifiers={modifiers} />
    </div>
  );
}

Replacing props resets the current month

When the component receives new props, the current month is replaced by the new prop's initialMonth. (hint: should add a state saying when the displayed month did change)

Make a date range selectable via drag and drop

Any idea how you could accomplish dragging the date range like in this screenshot?

Add support of react-v0.14-rc1

Add support of react-v0.14-rc1

Switch from moment.js to Intl

Moment.js should not be a requirement. The day picker can work with dates using the native Date object and return days as Date objects (or I'd prefer YYYY-MM-DD).

New dayElement prop

This prop should replace the current renderDay prop (that should become deprecated) and accept a React Element that will receive the day prop, e.g.

function MyCustomDay({ day }) {
  return <div>{ day.toString() }</div>;
}

function MyComponent() {
  return <DayPicker dayElement={ <MyCustomDay /> } />
}

(this will supersede #50)