An easily internationalizable, mobile-friendly datepicker library for the web

Airbnb

Last update: Jan 6, 2023

Related tags

Date and Time react-dates

Overview

react-dates

An easily internationalizable, accessible, mobile-friendly datepicker library for the web.

Live Playground

For examples of the datepicker in action, go to http://airbnb.io/react-dates.

To run that demo on your own computer:

Clone this repository
npm install
npm run storybook
Visit http://localhost:6006/

Getting Started

Install dependencies

Ensure packages are installed with correct version numbers by running (from your command line):

(
  export PKG=react-dates;
  npm info "$PKG" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g; s/ *//g' | xargs npm install --save "$PKG"
)

Which produces and runs a command like:

npm install --save react-dates moment@>=#.## react@>=#.## react-dom@>=#.##

If you are running Windows, that command will not work, but if you are running npm 5 or higher, you can run npx install-peerdeps react-dates on any platform

Initialize

import 'react-dates/initialize';

As of v13.0.0 of react-dates, this project relies on react-with-styles. If you want to continue using CSS stylesheets and classes, there is a little bit of extra set-up required to get things going. As such, you need to import react-dates/initialize to set up class names on our components. This import should go at the top of your application as you won't be able to import any react-dates components without it.

Note: This component assumes box-sizing: border-box is set globally in your page's CSS.

Include component

import { DateRangePicker, SingleDatePicker, DayPickerRangeController } from 'react-dates';

Webpack

Using Webpack with CSS loader, add the following import to your app:

import 'react-dates/lib/css/_datepicker.css';

Without Webpack:

Create a CSS file with the contents of require.resolve('react-dates/lib/css/_datepicker.css') and include it in your html <head> section.

To see this in action, you can check out https://github.com/majapw/react-dates-demo which adds react-dates on top of a simple create-react-app setup.

Overriding Base Class

By default react-dates will use PureComponent conditionally if it is available. However, it is possible to override this setting and use Component and shouldComponentUpdate instead. It is also possible to override the logic in build/util/baseClass if you know that you are using a React version with PureComponent.

  import React from 'react';
  export default React.PureComponent;
  export const pureComponentAvailable = true;

Overriding styles

Right now, the easiest way to tweak react-dates to your heart's content is to create another stylesheet to override the default react-dates styles. For example, you could create a file named react_dates_overrides.css with the following contents (Make sure when you import said file to your app.js, you import it after the react-dates styles):

// NOTE: the order of these styles DO matter

// Will edit everything selected including everything between a range of dates
.CalendarDay__selected_span {
  background: #82e0aa; //background
  color: white; //text
  border: 1px solid $light-red; //default styles include a border
}

// Will edit selected date or the endpoints of a range of dates
.CalendarDay__selected {
  background: $dark-red;
  color: white;
}

// Will edit when hovered over. _span style also has this property
.CalendarDay__selected:hover {
  background: orange;
  color: white;
}

// Will edit when the second date (end date) in a range of dates
// is not yet selected. Edits the dates between your mouse and said date
.CalendarDay__hovered_span:hover,
.CalendarDay__hovered_span {
  background: brown;
}

This would override the background and text colors applied to highlighted calendar days. You can use this method with the default set-up to override any aspect of the calendar to have it better fit to your particular needs. If there are any styles that you need that aren't listed here, you can always check the source css of each element.

Make some awesome datepickers

We provide a handful of components for your use. If you supply essential props to each component, you'll get a full featured interactive date picker. With additional optional props, you can customize the look and feel of the inputs, calendar, etc. You can see what each of the props do in the live demo or explore how to properly wrap the pickers in the examples folder.

DateRangePicker

The DateRangePicker is a fully controlled component that allows users to select a date range. You can control the selected dates using the startDate, endDate, and onDatesChange props as shown below. The DateRangePicker also manages internal state for partial dates entered by typing (although onDatesChange will not trigger until a date has been entered completely in that case). Similarly, you can control which input is focused as well as calendar visibility (the calendar is only visible if focusedInput is defined) with the focusedInput and onFocusChange props as shown below.

Here is the minimum REQUIRED setup you need to get the DateRangePicker working:

<DateRangePicker
  startDate={this.state.startDate} // momentPropTypes.momentObj or null,
  startDateId="your_unique_start_date_id" // PropTypes.string.isRequired,
  endDate={this.state.endDate} // momentPropTypes.momentObj or null,
  endDateId="your_unique_end_date_id" // PropTypes.string.isRequired,
  onDatesChange={({ startDate, endDate }) => this.setState({ startDate, endDate })} // PropTypes.func.isRequired,
  focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null,
  onFocusChange={focusedInput => this.setState({ focusedInput })} // PropTypes.func.isRequired,
/>

The following is a list of other OPTIONAL props you may provide to the DateRangePicker to customize appearance and behavior to your heart's desire. All constants (indicated by ALL_CAPS) are provided as named exports in react-dates/constants. Please explore the storybook for more information on what each of these props do.

// input related props
startDatePlaceholderText: PropTypes.string,
endDatePlaceholderText: PropTypes.string,
startDateAriaLabel: PropTypes.string,
endDateAriaLabel: PropTypes.string,
startDateTitleText: PropTypes.string,
endDateTitleText: PropTypes.string,
disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([START_DATE, END_DATE])]),
required: PropTypes.bool,
readOnly: PropTypes.bool,
screenReaderInputMessage: PropTypes.string,
showClearDates: PropTypes.bool,
showDefaultInputIcon: PropTypes.bool,
customInputIcon: PropTypes.node,
customArrowIcon: PropTypes.node,
customCloseIcon: PropTypes.node,
inputIconPosition: PropTypes.oneOf([ICON_BEFORE_POSITION, ICON_AFTER_POSITION]),
noBorder: PropTypes.bool,
block: PropTypes.bool,
small: PropTypes.bool,
regular: PropTypes.bool,

// calendar presentation and interaction related props
renderMonthText: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'), // (month) => PropTypes.string,
orientation: PropTypes.oneOf([HORIZONTAL_ORIENTATION, VERTICAL_ORIENTATION]),
anchorDirection: PropTypes.oneOf([ANCHOR_LEFT, ANCHOR_RIGHT]),
openDirection: PropTypes.oneOf([OPEN_DOWN, OPEN_UP]),
horizontalMargin: PropTypes.number,
withPortal: PropTypes.bool,
withFullScreenPortal: PropTypes.bool,
appendToBody: PropTypes.bool,
disableScroll: PropTypes.bool,
daySize: nonNegativeInteger,
isRTL: PropTypes.bool,
initialVisibleMonth: PropTypes.func,
firstDayOfWeek: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
numberOfMonths: PropTypes.number,
keepOpenOnDateSelect: PropTypes.bool,
reopenPickerOnClearDates: PropTypes.bool,
renderCalendarInfo: PropTypes.func,
renderMonthElement: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'), PropTypes.func, // ({ month, onMonthSelect, onYearSelect, isVisible }) => PropTypes.node,
hideKeyboardShortcutsPanel: PropTypes.bool,

// navigation related props
navPrev: PropTypes.node,
navNext: PropTypes.node,
onPrevMonthClick: PropTypes.func,
onNextMonthClick: PropTypes.func,
onClose: PropTypes.func,
transitionDuration: nonNegativeInteger, // milliseconds

// day presentation and interaction related props
renderCalendarDay: PropTypes.func,
renderDayContents: PropTypes.func,
minimumNights: PropTypes.number,
minDate: momentPropTypes.momentObj,
maxDate: momentPropTypes.momentObj,
enableOutsideDays: PropTypes.bool,
isDayBlocked: PropTypes.func,
isOutsideRange: PropTypes.func,
isDayHighlighted: PropTypes.func,

// internationalization props
displayFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
monthFormat: PropTypes.string,
weekDayFormat: PropTypes.string,
phrases: PropTypes.shape(getPhrasePropTypes(DateRangePickerPhrases)),
dayAriaLabelFormat: PropTypes.string,

SingleDatePicker

The SingleDatePicker is a fully controlled component that allows users to select a single date. You can control the selected date using the date and onDateChange props as shown below. The SingleDatePicker also manages internal state for partial dates entered by typing (although onDateChange will not trigger until a date has been entered completely in that case). Similarly, you can control whether or not the input is focused (calendar visibility is also controlled with the same props) with the focused and onFocusChange props as shown below.

Here is the minimum REQUIRED setup you need to get the SingleDatePicker working:

<SingleDatePicker
  date={this.state.date} // momentPropTypes.momentObj or null
  onDateChange={date => this.setState({ date })} // PropTypes.func.isRequired
  focused={this.state.focused} // PropTypes.bool
  onFocusChange={({ focused }) => this.setState({ focused })} // PropTypes.func.isRequired
  id="your_unique_id" // PropTypes.string.isRequired,
/>

The following is a list of other OPTIONAL props you may provide to the SingleDatePicker to customize appearance and behavior to your heart's desire. All constants (indicated by ALL_CAPS) are provided as named exports in react-dates/constants. Please explore the storybook for more information on what each of these props do.

// input related props
placeholder: PropTypes.string,
ariaLabel: PropTypes.string,
titleText: PropTypes.string,
disabled: PropTypes.bool,
required: PropTypes.bool,
readOnly: PropTypes.bool,
screenReaderInputMessage: PropTypes.string,
showClearDate: PropTypes.bool,
customCloseIcon: PropTypes.node,
showDefaultInputIcon: PropTypes.bool,
customInputIcon: PropTypes.node,
inputIconPosition: PropTypes.oneOf([ICON_BEFORE_POSITION, ICON_AFTER_POSITION]),
noBorder: PropTypes.bool,
block: PropTypes.bool,
small: PropTypes.bool,
regular: PropTypes.bool,

// calendar presentation and interaction related props
renderMonthText: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'), // (month) => PropTypes.string,
orientation: PropTypes.oneOf([HORIZONTAL_ORIENTATION, VERTICAL_ORIENTATION]),
anchorDirection: PropTypes.oneOf([ANCHOR_LEFT, ANCHOR_RIGHT]),
openDirection: PropTypes.oneOf([OPEN_DOWN, OPEN_UP]),
horizontalMargin: PropTypes.number,
withPortal: PropTypes.bool,
withFullScreenPortal: PropTypes.bool,
appendToBody: PropTypes.bool,
disableScroll: PropTypes.bool,
initialVisibleMonth: PropTypes.func,
firstDayOfWeek: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
numberOfMonths: PropTypes.number,
keepOpenOnDateSelect: PropTypes.bool,
reopenPickerOnClearDate: PropTypes.bool,
renderCalendarInfo: PropTypes.func,
renderMonthElement: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'), // ({ month, onMonthSelect, onYearSelect, isVisible }) => PropTypes.node,
hideKeyboardShortcutsPanel: PropTypes.bool,
daySize: nonNegativeInteger,
isRTL: PropTypes.bool,

// navigation related props
navPrev: PropTypes.node,
navNext: PropTypes.node,
onPrevMonthClick: PropTypes.func,
onNextMonthClick: PropTypes.func,
onClose: PropTypes.func,
transitionDuration: nonNegativeInteger, // milliseconds

// day presentation and interaction related props
renderCalendarDay: PropTypes.func,
renderDayContents: PropTypes.func,
enableOutsideDays: PropTypes.bool,
isDayBlocked: PropTypes.func,
isOutsideRange: PropTypes.func,
isDayHighlighted: PropTypes.func,

// internationalization props
displayFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
monthFormat: PropTypes.string,
weekDayFormat: PropTypes.string,
phrases: PropTypes.shape(getPhrasePropTypes(SingleDatePickerPhrases)),
dayAriaLabelFormat: PropTypes.string,

DayPickerRangeController

The DayPickerRangeController is a calendar-only version of the DateRangePicker. There are no inputs (which also means that currently, it is not keyboard accessible) and the calendar is always visible, but you can select a date range much in the same way you would with the DateRangePicker. You can control the selected dates using the startDate, endDate, and onDatesChange props as shown below. Similarly, you can control which input is focused with the focusedInput and onFocusChange props as shown below. The user will only be able to select a date if focusedInput is provided.

Here is the minimum REQUIRED setup you need to get the DayPickerRangeController working:

<DayPickerRangeController
  startDate={this.state.startDate} // momentPropTypes.momentObj or null,
  endDate={this.state.endDate} // momentPropTypes.momentObj or null,
  onDatesChange={({ startDate, endDate }) => this.setState({ startDate, endDate })} // PropTypes.func.isRequired,
  focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null,
  onFocusChange={focusedInput => this.setState({ focusedInput })} // PropTypes.func.isRequired,
  initialVisibleMonth={() => moment().add(2, "M")} // PropTypes.func or null,
/>

The following is a list of other OPTIONAL props you may provide to the DayPickerRangeController to customize appearance and behavior to your heart's desire. Again, please explore the storybook for more information on what each of these props do.

  // calendar presentation and interaction related props
  enableOutsideDays: PropTypes.bool,
  numberOfMonths: PropTypes.number,
  orientation: ScrollableOrientationShape,
  withPortal: PropTypes.bool,
  initialVisibleMonth: PropTypes.func,
  renderCalendarInfo: PropTypes.func,
  renderMonthElement: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'), // ({ month, onMonthSelect, onYearSelect, isVisible }) => PropTypes.node,
  onOutsideClick: PropTypes.func,
  keepOpenOnDateSelect: PropTypes.bool,
  noBorder: PropTypes.bool,

  // navigation related props
  navPrev: PropTypes.node,
  navNext: PropTypes.node,
  onPrevMonthClick: PropTypes.func,
  onNextMonthClick: PropTypes.func,
  transitionDuration: nonNegativeInteger, // milliseconds

  // day presentation and interaction related props
  renderCalendarDay: PropTypes.func,
  renderDayContents: PropTypes.func,
  minimumNights: PropTypes.number,
  isOutsideRange: PropTypes.func,
  isDayBlocked: PropTypes.func,
  isDayHighlighted: PropTypes.func,

  // internationalization props
  monthFormat: PropTypes.string,
  weekDayFormat: PropTypes.string,
  phrases: PropTypes.shape(getPhrasePropTypes(DayPickerPhrases)),
  dayAriaLabelFormat: PropTypes.string,
/>

Localization

Moment.js is a peer dependency of react-dates. The latter then uses a single instance of moment which is imported in one’s project. Loading a locale is done by calling moment.locale(..) in the component where moment is imported, with the locale key of choice. For instance:

moment.locale('pl'); // Polish

However, this only solves date localization. For complete internationalization of the components, react-dates defines a certain amount of user interface strings in English which can be changed through the phrases prop (explore the storybook for examples). For accessibility and usability concerns, all these UI elements should be translated.

Advanced

react-dates no longer relies strictly on CSS, but rather relies on react-with-styles as an abstraction layer between how styles are applied and how they are written. The instructions above will get the project working out of the box, but there's a lot more customization that can be done.

Interfaces

The react-dates/initialize script actually relies on react-with-styles-interface-css under the hood. If you are interested in a different solution for styling in your project, you can do your own initialization of a another interface. At Airbnb, for instance, we rely on Aphrodite under the hood and therefore use the Aphrodite interface for react-with-styles. If you want to do the same, you would use the following pattern:

import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
import aphroditeInterface from 'react-with-styles-interface-aphrodite';
import DefaultTheme from 'react-dates/lib/theme/DefaultTheme';

ThemedStyleSheet.registerInterface(aphroditeInterface);
ThemedStyleSheet.registerTheme(DefaultTheme);

The above code has to be run before any react-dates component is imported. Otherwise, you will get an error. Also note that if you register any custom interface manually, you must also manually register a theme.

Theming

react-dates also now supports a different way to theme. You can see the default theme values in this file and you would override them in the following manner:

import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
import aphroditeInterface from 'react-with-styles-interface-aphrodite';
import DefaultTheme from 'react-dates/lib/theme/DefaultTheme';

ThemedStyleSheet.registerInterface(aphroditeInterface);
ThemedStyleSheet.registerTheme({
  reactDates: {
    ...DefaultTheme.reactDates,
    color: {
      ...DefaultTheme.reactDates.color,
      highlighted: {
        backgroundColor: '#82E0AA',
        backgroundColor_active: '#58D68D',
        backgroundColor_hover: '#58D68D',
        color: '#186A3B',
        color_active: '#186A3B',
        color_hover: '#186A3B',
      },
    },
  },
});

The above code would use shades of green instead of shades of yellow for the highlight color on CalendarDay components. Note that you must register an interface if you manually register a theme. One will not work without the other.

A note on using `react-with-styles-interface-css`

The default interface that react-dates ships with is the CSS interface. If you want to use this interface along with the theme registration method, you will need to rebuild the core _datepicker.css file. We do not currently expose a utility method to build this file, but you can follow along with the code in https://github.com/airbnb/react-dates/blob/master/scripts/buildCSS.js to build your own custom themed CSS file.

Comments

Allow Year/month navigation

This allows for a quick way to jump to another year or month without having to use the nav keys and go one month at a time.

Here is an example. Clicking on the year or month displays another dialog showing the years/months.

React DatePicker
feature request

opened by rodryquintero 70
Feature / RTL Support

I've added support for RTL languages. The consumer should supply a prop isRTL : bool. I've also added example stories to see it in action (on both horizontal and vertical mode ). I haven't created tests for it yet as i'm not that familiar with those kind of tests, it will be nice to get help with those tests if you think is needed.
semver-minor: new stuff

opened by sag1v 65

Errors when upgrading to latest react-dates

upgrading from 12.1.0 to 13.0.3

After installing the new module running into these errors, I think its something to do w/ storybook?

Uncaught TypeError: Cannot read property 'theme' of undefined

and

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `SearchFilters`.

and

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `SearchFilters`.

Wondering if anyone else ran into these, and if there is a fix for them. Thanks in advanced!

needs react-dates/initialize

opened by jnrepo 40

An in-range update of storybook is breaking the build 🚨
There have been updates to the storybook monorepo:

The devDependency @storybook/addon-actions was updated from 5.2.2 to 5.2.3.

The devDependency @storybook/addon-info was updated from 5.2.2 to 5.2.3.

The devDependency @storybook/addon-links was updated from 5.2.2 to 5.2.3.

The devDependency @storybook/addon-options was updated from 5.2.2 to 5.2.3.

The devDependency @storybook/addons was updated from 5.2.2 to 5.2.3.

The devDependency @storybook/react was updated from 5.2.2 to 5.2.3.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the storybook group definition.

storybook is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

✅ Tidelift: Dependencies checked (Details).

❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

Release Notes for v5.2.3

Bug Fixes

Core: Fix lib/core whitelist (#8182)

Commits

The new version differs by 4 commits.

8360036 v5.2.3

9bd6988 Core: Fix lib/core whitelist (#8182)

508be14 5.2.2 latest.json version file

bccc1d2 Update version.ts

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot :palm_tree:
greenkeeper
opened by greenkeeper[bot] 37
[Issue 25] Unopinionated month and year selection support
After tracking #25, which has been plaguing many users, myself included, I hope to have implemented, minimally, a stopgap solution to allow users to traverse months and years on the calendar, based on the excellent work contributed by @jvanderz22.

From the comments in the issue, it seems that the major sticking point for the past few months has been around design/UX. For this proposed solution, there is no design required from the maintainers; the caller is 100% responsible for the rendering.

To achieve this, this PR adds a single prop, renderCaption, which is expected to be a function that receives a data object as a param and returns a renderable custom caption (i.e. string, number, node). The data object passed to renderCaption contains the following parameters:

month -- a moment object for the current month

onMonthSelect -- a callback function that takes two params

month - the month moment object

value - the integer value of the month to change to

onYearSelect -- a callback function that takes two params

month - the month moment object

value - the integer value of the year to change to

Here is some sample code of how this could work with simple select inputs (this sample is also available in the storybook in this PR):

<div style={{ display: 'flex', justifyContent: 'center' }}> <div> <select value={month.month()} onChange={(e) => { onMonthSelect(month, e.target.value); }} > {moment.months().map((label, value) => ( <option value={value}>{label}</option> ))} </select> </div> <div> <select value={month.year()} onChange={(e) => { onYearSelect(month, e.target.value); }} > <option value={moment().year() - 1}>Last year</option> <option value={moment().year()}>{moment().year()}</option> <option value={moment().year() + 1}>Next year</option> </select> </div> </div>

Even if there is a solution later to present a pre-designed interface for selecting months and years, it would still be nice to have something like renderCaption to allow users to provide their own custom implementation.

As of this writing, this PR passes all tests and is updated to version 16.5.0.
semver-minor: new stuff
opened by GoGoCarl 35
An in-range update of babel7 is breaking the build 🚨
There have been updates to the babel7 monorepo:

The devDependency @babel/cli was updated from 7.5.5 to 7.6.0.

The devDependency @babel/core was updated from 7.5.5 to 7.6.0.

The devDependency @babel/register was updated from 7.5.5 to 7.6.0.

The dependency @babel/runtime was updated from 7.5.5 to 7.6.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the babel7 group definition.

babel7 is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details

✅ Tidelift: Dependencies checked (Details).

❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot :palm_tree:
greenkeeper
opened by greenkeeper[bot] 32
chore: use nyc over istanbul-cli

👋 Hi! istanbuljs member here -

Thought I'd help out a little by simplifying your coverage commands and configuration :)

Otherwise, the main win of bringing you over to the much better supported nyc + babel-plugin-istanbul is that you're now getting more accurate coverage reports and stats!

Please let me know if anything concerns you - very happy to answer any questions you might have. Thanks again for this wonderful library!

opened by JaKXz 29
[Fix] `DateRangePicker`, `DateRangePickerInput`: Fix keyboard navigation for second input
Keyboard navigation is broken for the date range picker. The following bugs exist:

When passing through the component with tab-navigation, after exiting the end-date input the dropdown does not close [1]

When attempting to enter values into the end-date dropdown, users would have to tab backwards back to the dropdown to enter values [2]

The simplest and clearest solution that came to be is simply to put the day picker after the currently active input. In this way, the dropdown always appears next in the tab-order to the input the user has selected. The existing blur handler in the dropdown means that tabbing through the component will leave the dropdown closed at the end.

The react keys ensure that the element is just moved over in the DOM and so there is no flickering.

Fixes https://github.com/airbnb/react-dates/issues/1809

@majapw

[1] Before, passing through the component using tab

[2] Before, enter values with keyboard

[3] After, passing through the component using tab

[4] After, enter values with keyboard
semver-patch: fixes/refactors/etc
opened by greglo 26
[Feature] - Add onClose callback

This PR is related to #264

We are having some troubles when the user close the picker on the <DateRangePicker /> component, because it calls the onDatesChange and the onFocusChange at the same time, and when the onFocusChange is called without the focus there wasn't time to reset the state.
semver-minor: new stuff

opened by rafacianci 26
Cannot indicate which month is visible on open

Ideally this should be a controlled prop that would default to the current month. That way you can close the <DayPicker /> and reopen to where you were previously

My vision is that this would be a currentMonth prop on the SingleDatePicker and on the DateRangePicker that would take in a moment object. If a parent component wanted to keep track of this in the state then, they could do so using the onPrevMonthClick and onNextMonthClick callbacks.
semver-minor: new stuff pull request wanted feature request

opened by majapw 26
[Issue 349] Add single-click range picker
This adds the feature requested in #349 by allowing a range prop to be added to the DayPickerRangeController. The range prop requires an object with optional before / after keys, these expect a function that is passed a moment object of the hovered day. Return a moment object from each function to specify the range.

Eg. Selecting 5 days (hovered day is not inclusive)

range = { before: day => day.subtract(2, 'days'), after: day => day.add(2, 'days') }

I've added storybook examples to show how this works across a couple of scenarios. I'm happy to hear feedback on this and make changes to ensure it fits within your project

semver-minor: new stuff
opened by jakeclements 25
How to disable the preselected dates

We have a filter that allows our customers to filter by city, category and 2 dates (calendar). When they first enter the website, we want the calendar to have none preselected date, so if they pick a city or a category, the filter will filter only by those parameters and not by the pre-selected dates.

opened by nicomonterosabelli 3
wrong height on month transitions
react-dates version [email protected]

Describe the bug when doing month navigation the height of months is incorrect, dates of last week are truncated

Source code (including props configuration) See example here https://codesandbox.io/s/tender-payne-ynvlgl?file=/src/App.js

Screenshots/Gifs

Desktop (please complete the following information):

OS: macOS

Browser Chrome

Version 107.0.5304.110 (Official Build) (x86_64)

Is the issue reproducible in Storybook? issue reproducible in storybook if run locally but not in published storybook version
opened by Karine91 0
Any plan to support month/year range pickers?

We're thinking about using this otherwise wonderful lib but was wondering if there's any appetite to support month range picker for example, assuming you don't already?
pull request wanted feature request

opened by razlani 6
keyboard shortcuts panel toggle button not appearing on Google Chrome
react-dates version [email protected]

Describe the bug On the Google Chrome browser if the DayPicker has the withPortal set to true and the orientation set to vertical when the DayPicker is opened on a tablet-sized screen the keyboard shortcuts panel toggle button (right bottom corner triangle with a question mark) and the shortcuts panel will not appear and both are completely removed from the DOM.

Once this bug has occurred and the keyboard shortcuts button and panel will no longer appear even with page reloads, changing to desktop screen size, or clearing all storage types and cookies.

This appears to be similar to this issue raised in 2019 https://github.com/react-dates/react-dates/issues/1706

Source code (including props configuration) Steps to reproduce the behavior:

<DayPickerRangeController numberOfMonths={2} startDate={startDate} endDate={endDate} focusedInput={focusedInput} onFocusChange={(focused) => setFocusedInput(focused || 'endDate')} initialVisibleMonth={null} onDatesChange={handleDatesChange} orientation={ 'vertical' } withPortal={true} minimumNights={0} />

If you have custom methods that you are passing into a react-dates component, e.g. onDatesChange, onFocusChange, renderMonth, isDayBlocked, etc., please include the source for those as well.

Desktop (please complete the following information):

OS: [MAC OS, Windows]

Browser [chrome]

Is the issue reproducible in Storybook? Please link to the relevant storybook example
bug pull request wanted
opened by MarkKD 0
Can WeekHeaderElement be displayed on every month using vertical orientation?
[email protected]

Is it possible to render the WeekHeaderElement on every single month using vertical orientation? Currenly the WeekHeaderElement is being rendered only on first month.

<DayPickerRangeController monthFormat={"MMMM, YYYY"} orientation="vertical" numberOfMonths={3} initialVisibleMonth={() => moment(new Date())} />
opened by Yavul 0
How can I show only previous months?

I have a code: <DayPicker numberOfMonths={36} orientation="verticalScrollable"/> Previous and future months are shown. How can I hide future months?

opened by uCryNet 0