Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • May 23 22:48

    gpbl on gh-pages

    Deploy website - based on 71655… (compare)

  • May 23 22:44
    gpbl labeled #1456
  • May 23 21:53
    gpbl edited #1456
  • May 23 21:46
    gpbl labeled #1456
  • May 23 14:51
    claviustales synchronize #1456
  • May 23 13:07
    gpbl commented #1457
  • May 23 12:55

    gpbl on master

    fix(docs): fix typo (#1457) (compare)

  • May 23 12:55
    gpbl closed #1457
  • May 23 12:24
    denkristoffer opened #1457
  • May 21 14:06
    gpbl commented #1456
  • May 21 09:58
    claviustales opened #1456
  • May 20 12:07
    gpbl locked #1454
  • May 20 10:30
    claviustales labeled #1454
  • May 20 10:30
    claviustales opened #1454
  • May 15 15:25

    gpbl on gh-pages

    Deploy website - based on 77bbb… (compare)

  • May 15 15:18

    gpbl on gh-pages

    Deploy website - based on 77bbb… (compare)

  • May 15 15:17

    gpbl on v8.0.5


  • May 15 15:16

    gpbl on master

    Bump 8.0.5 Merge branch 'master' of https:… (compare)

  • May 15 15:15

    gpbl on v8.0.0


  • May 15 15:15

    gpbl on aria-disabled-2



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.
@sialbul sounds like you are supplying a string e.g. '24/7/2019' instead of a dat e.g. new Date(2019, 7, 24)
@teechap you could try canChangeMonth={false} in the props... I think that will stop the arrow keys for the year change... although it will probably affect the changing of the month too - I've never tried that prop. If you didn't do that you'd have to get in and stop the key events from propagating up to the layer just below the container... You could potentially stop that using the renderMonths renderNav methods but it doesn't sound easy
@shukanshah if firstDayOfWeek={1} isn't working that sounds like a bug. For selecting multiple weeks, following the example should work fine except you'd need to set a separate range based on your date. I expect you'd just need to tinker with the getWeekRange method in that example to do what you want
can anyone help me to config react-day-picker with function component
Volkan Ongun
Does any one know if we can start the week from Monday for react day picker?
Mika Web Studio
@volkanongun You can use firstDayOfWeek for that: https://react-day-picker.js.org/examples/localization
Volkan Ongun
great lib, thanx! @milkins87_twitter
Bharath Kumar Ramasubramanian
hi.is there a way to add styles to the input box ?
sorry i am a css newbie
hi . i want to change react-day-picker's calendar to jalali calendar . how can i do it?
@volkanongun you can change firstDayOfWeek and set in on 3 to start the day of the week from monday
Jonatas Daniel
Hey guys, do you have some example how to use moment with react-day-picker? I need to change the dates based on a period (1 year, 1 month, etc), and set them to my date picker component
Laurens Bosscher
Hey, just wanted to drop by to let you guys know that react-day-picker has been an joy to work with! :)
keep up the good work!
Ahmed Ramadan
hello, i want to know if there is possible to choose 3 dates range (start,end,middle)
Isabeau Bergeron
Hi folks! We started using this lib for our product, we love it! I'd like to give you some of our needs and hopefully others for future features! It would be nice to have a click handler for the weekdays. In our app it is useful to select all weekdays at once. I've done the same for the month and the week, which have handlers. I'll modify the lib myself and see where it goes :)
Ryan Giordano
I ran into this gpbl/react-day-picker#723 when using custom inputs for DayPickerInput. I commented with what solved it locally for me, but wanted to chat about it before I made a PR with the fix.
how do i use 2 <DayPicker> in 1 <div>?
the 2 calendars are working togheter, if i click in one day, it will click in the other. i dont want that
Kaspar Rosin
Really could use an example on the main docs on how to remove single items from range. Let's say somebody picks a range from 1st october to 30th, but wishes to remove only the 15th.
Hi Gitter! I'm the maintainer of react-day-picker :wave: I'm working on the next release that will take some radical changes in the component. I'd love some help for testing the new API etc.
I'm also thinking to close this channel and move to https://spectrum.chat/react-day-picker?tab=posts

Hello friends can somebody help me with this basic question? In the document and examples it shows how to use month/year DropBox for one calendar. Can somebody help how to have this feature for 2 calendars? When I select a month from the second calendar it changes the first calendar. I am new to react - thank you.

When I select a month from the second calendar it changes the first calendar- i want a combination of these 2 examples:

hey @gpbl is this channel still active? or i should use the new chatroom you suggested?
Hello, can someone please accept this issue? gpbl/react-day-picker#990
Hi! Anyone knows how can I change DayPickerInput CSS styles if I added the lib through yarn?
Uyiosa Enabulele
Hi @gpbl I am trying to prevent the date range date picker to field from moving the selected month to the left when you click on a month on the right with hideOnDayClick set to false. is there a prop currently available to do that.
Onopko Dima
Hi guys, How can I style datePicker via css modules?

Hey guys.
What API for date does DayPicker use?
I'm mocking Date in mytest as https://jsfiddle.net/st06zenL/ here and keep getting console warning: Encountered two children with the same key, 197001.
I see that dates in calendar are actually correct, but aria-label="Thu Jan 01 1970"
Seems that my date mock breaks the library.

Any ideas?

Todd Chambery
Hi, I just want to say a big "Thanks!" for the extensive code examples on homepage
Kevin Denny II
Hi @gpbl!!!

I am having an issue, gpbl/react-day-picker#1045, utilizing the DayPicker api for use of the pop-up calendar. I need to close/hide when I click outside the calendar. I want to work like the DayPickerInput component work but with our the textbox input. I ONLY need the popup calendar. Using onBlur only partially works because if I click a week, it does not immediately recognize the focus the calendar container. I am really struggling with this and I am sure there is a simple solution.

Here is code snippet:

<div className={calendarPopOut} onBlur={handleClickOutside}>
     weekdayElement={<ThreeCharacterAbv />}


Robert Butler
So I'm wondering if I can style react-day-picker to work like a material design day picker; but I have some specific UX requirements on top of that to address as well; like I need to completely swap out the navigation for my own (we use two select boxes for picking which month/year you're looking at)
Robert Butler
Ah, okay
That actually works fine
Robert Butler
so is the typescript version stable-ish?