Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • Aug 12 16:42

    gpbl on master

    website: fix rendered example s… (compare)

  • Aug 12 16:11

    gpbl on gh-pages

    Deploy website - based on fab3b… (compare)

  • Aug 12 16:02

    gpbl on gh-pages

    Deploy website - based on fab3b… (compare)

  • Aug 12 16:02

    gpbl on master

    website: fix example overflow (compare)

  • Aug 12 15:52

    gpbl on master

    website: update code examples l… ci: rename job (compare)

  • Aug 12 15:48

    gpbl on gh-pages

    Deploy website - based on 1658c… (compare)

  • Aug 11 23:58
    gpbl commented #1468
  • Aug 11 23:58
    gpbl commented #1468
  • Aug 11 23:58
    gpbl commented #1468
  • Aug 11 23:58
    gpbl commented #1468
  • Aug 11 23:46
    gpbl review_requested #1468
  • Aug 11 23:45

    gpbl on gh-pages

    Deploy website - based on 1658c… (compare)

  • Aug 11 23:44

    gpbl on master

    website: fix dark theme after C… (compare)

  • Aug 11 23:11

    gpbl on gh-pages

    Deploy website - based on e3e02… (compare)

  • Aug 11 23:04

    gpbl on v8.1.0


  • Aug 11 23:04

    gpbl on master

    Bump v8.1.0 (compare)

  • Aug 11 22:59

    gpbl on master

    Bump v8.0.8 (compare)

  • Aug 11 22:57

    gpbl on master

    Update CHANGELOG for v8.0.8 (compare)

  • Aug 11 22:43
    gpbl labeled #1490
  • Aug 11 22:38
    gpbl closed #1491
Xiaoxue CHEN
can anyone show me how to call hideDayPicker() from overlay component?
@ca7erina hideDayPicker is a method on the DatePickerInput, you could place a ref on it and then pass that ref to your custom overlay component in order to call the instance methods, see https://codesandbox.io/s/q38qrw678w
Julio Olivera

Hi! I'm using DatePicker to create a UI showing multiple months, and I was wondering if it's possible to get the month index when rendering a custom caption. The design I'm trying to implement includes the prev and next month arrows to the side of the month names, so something like

<  December  |  January  >

I can add the arrows using a custom Caption element and use the public methods to manually change the months without using an external navbar element, but when I'm rendering the Caption for, say, December, I didn't find a way to know whether December is the first month being displayed or the last one. As a workaround, I'm using a custom navbar element absolutely positioned that I manually align with the captions, but I'm wondering if I'm missing something.

Can anyone help me how can i use daypicker (switch between years and months) from daypickerinput?
Hi there , if we change the Date format , the selectedDay is not highlighted on the DatePicker. We found it only accepts the value format "yyyy-mm-dd". Is there a proper way to change the date format ?
Prashant Rajoriya
Hey, anyone knows how to add css to selected date ?
I want to make selected date different from normal days css.
Mitch Rivet
hi, first of all thanks for the lib. very nice. i'm wondering if there is a plan for next release/bug fixes.
Vicente Carrillo
hi, I'm running into an issue using the DayPickerInput with disabledDays. I get an error when I try to use the before/after object to disable dates before and after certain dates
Uncaught TypeError: d.getTime is not a function
    at clone (DateUtils.js:27)
    at isDayAfter (DateUtils.js:107)
    at ModifiersUtils.js:36
    at Array.some (<anonymous>)
    at dayMatchesModifier (ModifiersUtils.js:26)
    at ModifiersUtils.js:74
    at Array.reduce (<anonymous>)
    at Object.getModifiersForDay (ModifiersUtils.js:72)
    at Month._this.renderDay (Month.js:66)
    at Array.map (<anonymous>)
    at Month.js:194
    at Array.map (<anonymous>)
    at Month.render (Month.js:167)
                todayButton: 'Today',
                disabledDays: {
                  after: new Date(),
                  before: new Date(2019, 1, 1),
              format={['MM/DD/YYYY', 'DD-MM-YYYY']}
Vicente Carrillo
in the debugger it's showing the Date object I pass in as a DateComponent.. ?
Vicente Carrillo
nvm, mistakenly was importing another component that was overriding the Date class :/
Dries Decramer
Hi, I'm using the overlayComponent prop and everything works fine. Until I click somewhere inside the overlay, then it closes.
Anyone also facing this issue?
Hi.. Firefox
Alexander Nyan
hi, can i close overlay if i inputted valid date and pressed "enter" with DayPickerInput?
i tried, but unfortunately, i didn't succeed
Dhruv Soni

Hi, I think the documentation is not updated especially the example section. examples/input-date-fns.js in particular.

below lines are throwing error for packages while importing.

import dateFnsFormat from 'date-fns/format';
import dateFnsParse from 'date-fns/parse';

I fixed them by importing them in below manner.

import {format} from 'date-fns;
import {parse} from 'date-fns';

Is there a way to turn off localization?
How to make 12 hours datePicker?
Hi there. Just started using Date Picker and have basics working . I'm trying to build this http://react-day-picker.js.org/examples/elements-year-navigation/ but I want it to display in the overlay on click.
I tired mimicking the concepts in here http://react-day-picker.js.org/examples/input-custom-overlay/ but no luck. Any ideas/help is much appreciated
@gpbl any idea on this ^
Ava Guerrero
hello, i am having an issue where when using DatePickerInput with the ability to switch between months/years, the month/year dropdown do not seem to work on iOS browsers
i forked a similar issue last time (i saw from github): https://codesandbox.io/s/0y84wrp8mn .. and try opening this on an iOS browser. clicking on the dropdown doesn't show the selection..
hey everyone any idea on how I can use Hooks inside a renderDay custom component?

Hello. Can anyone review the PR? @gpbl


Hello is there a way to assign name attribute to the input tag inside the input container?
Corey Bruyere
Has anyone had success with building their own custom footer filters to filter dates? I'm looking to not use the todayButton provided with the library and create my own custom footer that displays the filter buttons: Go to Today, Past Year, Last 3 Months, This Month, and This Week. Looking for insight on how and if it's possible to tap into the libraries API outside of the context of the component.
Victor Chan
Hi, there. I came across a weird date rendering issue that I'm having trouble figuring out. I have an instance on my dev site, built with Gatsby on Netlify where my modifiers logic appears to work (I logged the actual true/false values) but the style is applied to the wrong date. If I subsequently advance or retreat a month, causing a refresh, the styles are applied correctly! Oddly enough, I tried to reproduce it in Codesandbox to no avail. Anyone interested in taking a quick look? My dev site: https://dev--ag-poc.netlify.com/northamerica/en/events and codesandbox barebones with same modifiers logic: https://codesandbox.io/s/km9o3zq2x7
Victor Chan
In my dev example a number of dates are circled to show what dates match against a list of event days. They're all affected but the easiest to discern are the April 17th, 24th and May 1st. The first two should be highlighted but aren't until a re-render happens. The third is only highlighted due to an overlapping event. But the corresponding error dates on 18th and 2nd disappear with the re-render. You can see the dates I've replicated in the Codesandbox source. When I run it in Codesandbox, the underlined dates display correctly but I'm not really sure how to diagnose my dev issue when there aren't any errors from the build. Even though Gatsby is a static site generator and the site gets built remotely could either of those two factors cause dates to be improperly calculated. I'm under the impression that all my evaluation is done at client side. I'm using DateUtiles.isDayInRange and the Date() constructor to do all my comparisons.
Shivam Parashar

Please someone help me in this,
i imported

import DayPicker from "react-day-picker";
import "react-day-picker/lib/style.css";

but the CSS is not working why ??

does anyone faced the same issue .. please help me in this ?
Shivam Parashar
hello is anyone there ?
Shivam Parashar
@gpbl r u there bro
Shivam Parashar
@lafisrap did u get the solution ?? from webpack loader as i am also facing the same issue

Hi Everyone I'm newer to react so this question should be both easy and embarrassing. I can't figure out how to get the state from the react-day-picker into a parent component.

This is what I wrote to try, but it's not working. Likely it's a lack of familiarity with the tools.

class datePicker extends Component {
    this.handleDayChange = this.handleDayChange.bind(this)
    this.state = {
      selectedDay: '',

  handleDayChange(day, { selected }) {
    this.setState({ selectedDay: day });

    if(this.prevProps.selectedDay !== this.state.selectedDay){

  render() {
    return (
      <DayPickerInput onDayChange={this.handleDayChange} />

What I wanted to do with the componentDidUpdate was use it to see that the this.state.selectedDay changed when compared to the default state I set in the parent component which was also set to selectedDay = '' and so I tried to do a comparison check via that lifecycle component between this.state.selectedDay and this.props.selectedDay
This is the error I am getting Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
Hey everyone, how to handle double click in dates in date picker?
I got no clue ??
I need to handle single click and double click in the dates !!
Huzeyfe Kıran
Hey Guys, I have a question. Is it possible to create multiple instances of DayPicker? When I create two instances, they act the same, clicking on dates changes date in other instances as well.
Max Leiter
@Huzo: sounds like a state management problem

Hello, my name is Liora and I am currently hunting open source projects for company NeuraLegion (www.neuralegion.com)
We just launched a free annual subscription for open source projects for our AIAST tool NexPloit.

If you are interested, please, reach us on opensource@neuralegion.com!

Thank you for your time and consideration! If you have any questions, please do not hesitate to contact us!


Does anyone know if there's an easy way to prevent the year from changing in <DayPicker /> when a user presses the "down" or "up" arrow key on their keyboard while focused on the calendar? I have some users who use the keyboard to scroll up/down on the page and they're really confused by this feature. Thanks in advance for any help!
I want to start calendar week from Monday. I tried firstDayOfWeek={1} still starts with sunday. Does anyone know any solution for that?
secondly, I want to select multiple week in https://react-day-picker.js.org/examples/selected-week. is there any way to do that?
Sibel Baslamisli
Hi, I am using date range and getting this error when i click the date "Warning: Failed prop type: Invalid prop fromMonth of type String supplied to DayPicker, expected instance of Date." Is there any way to fix this? Thank you.