react-day-picker is a flexible date picker component for React
Read the react-day-picker documentation and check out the examples to learn how to implement it.
Questions tagged [react-day-picker]
129 questions
7
votes
2 answers
React Day Picker calendar overlay pops up behind other components
How do I make the calendar overlay popup for the react day picker input field show on top of the other form components? The calendar is being hidden by the other form components. Is there some sort of z-index that I can set…
Lambert
- 2,233
- 5
- 29
- 44
6
votes
1 answer
Date picker month / year doesn't work on iOS
I am using react-day-picker package to select a date with the year/month props included. However, the year/month dropdown doesn't work properly on iOS mobile browsers:
import React from 'react';
import ReactDOM from "react-dom";
import…
catandmouse
- 11,309
- 23
- 92
- 150
6
votes
2 answers
change language in react-day-picker DayPickerInput component
I use DayPickerInput component to date fields on form, and I want to display the days and months in a different language (Hebrew, for that matter).
In the API of the library I found a very simple way to change a language for the basic component…
Malachi Waisman
- 482
- 4
- 14
5
votes
2 answers
Modifying width of input field in react day picker input
Is it possible to change the default width of input field of DayPickerInput? If yes, then how can I achieve it? I am not sure if we can do this with overlayComponent.
aman
- 133
- 3
- 11
5
votes
2 answers
Set min and max date on react day picker
How do i set maximum or minimum date?
Like for instance, i want to limit my daypicker only for the last 2 month (min date) until today (max date). So the user can't choose tomorrow's date. Thanks
http://react-day-picker.js.org/docs/
Riza S
- 85
- 1
- 1
- 7
4
votes
0 answers
Setting day tabIndex for React Day Picker?
By default react-day-picker sets the first day in the calendar to tabindex="0" and the rest of the days to tabindex="-1".
Is it possible to modify this so the first enabled day ends up being tabindex="0" ?
Tim Arney
- 1,776
- 2
- 18
- 23
4
votes
0 answers
Reset react-day-picker state after re-render
So basically in my app I have a funcionality to create new events by filling up a form.
Unfortunately the problem is that I have a DayPicker component with multi select from https://react-day-picker.js.org/examples/selected-multiple and I would like…
JustJSFan
- 143
- 1
- 1
- 6
4
votes
3 answers
Add a class to react-day-picker?
How can I add a class to react-day-picker's today button?
It seems to be possible from the documentation:
http://react-day-picker.js.org/api/DayPicker#classNames
const dayPickerClassNames = { todayButton: 'newClass' };
Evanss
- 23,390
- 94
- 282
- 505
3
votes
1 answer
How can I Post the correct week days using react-day-picker
In my React app I'm trying to send to the server week values using the library react-day-picker https://react-day-picker.js.org/examples/selected-week but its posting to the server the values with one day interval.
For example, When I pick in the…
ShayD
- 689
- 7
- 17
3
votes
2 answers
Day picker - disable days before today not working
I want to disable dates before today or past dates. Below is how I approached it but it's not working. I can still choose the dates before today..
Date component:
type Props = {
onDateChange: Function,
};
type State = {
calendarOpen: boolean,
…
RH1922
- 45
- 1
- 8
3
votes
1 answer
React-Day-Picker popup position
In the React-Day-Picker project, is there a way to change the position of the DayPicker popup? I have a DayPickerInput on the far right of my view, and the DayPicker then opens left aligned with the Input, but this makes the DayPicker get cropped by…
Deeks
- 43
- 1
- 8
3
votes
2 answers
React day picker overlay always on
I am using DayPickerInput and I have it set up like this (Range with 2 day picker inputs). I want to always display overlay and I don't want to hide it. I am aware of showOverlay prop but it only displays overlay during the initial rendering and the…
Nodios
- 439
- 6
- 18
3
votes
1 answer
`DatePickerInput` "className" property for ``
I'm using the DatePickerInput react component and want to style the element inside. With the component's className property I can only style the container around. Using classNames object property also styles other containers.
So is…
shaedrich
- 5,457
- 3
- 26
- 42
3
votes
0 answers
Adding an array of dates to modifiers in react-day-picker
I need to have three kind of days in my calendar. Disabled, active and non-active. (Disabled and non-active are not the same in this case).
I can send in an array of dates to 'disabledDays', no problem.
I can't seem to work out how to send an array…
thorey
- 31
- 1
3
votes
1 answer
react-day-picker doesn't close if keepfocus is set to false
I was trying to make a simple implementation of react-day-picker. But I found a problem when trying to close DayPicker container when it is triggered from DayPickerInput and the property keepFocus is set to false.
Matt H.
- 331
- 3
- 7