An easily internationalizable, mobile-friendly datepicker library for the web developed by Airbnb.
An easily internationalizable, mobile-friendly datepicker library for the web developed by Airbnb.
Questions tagged [react-dates]
155 questions
51
votes
5 answers
How to detect window size in Next.js SSR using react hook?
I am building an app using Next.js and react-dates.
I have two component DateRangePicker component and DayPickerRangeController component.
I want to render DateRangePicker when the window's width is bigger than size 1180px, if the size is smaller…
GoonGamja
- 1,936
- 5
- 20
- 46
8
votes
3 answers
Cannot read property 'create' of undefined -- react-dates error
While adding SingleDatePicker from 'react-dates' library, I got this error. Tried everything but couldn't find the error. The code is just to display the calender and display the selected date from the user. Please help!
Here is the code:
import…
goku
- 156
- 2
- 8
5
votes
5 answers
How to prevent user from selecting date above end date in react-dates
I'm wondering how I could prevent a user from selecting dates above today's date. For example, today is 3.7 so let that be the highest end date a user could select.
Roxy'Pro
- 4,216
- 9
- 40
- 102
5
votes
2 answers
Airbnb react-dates calendar with non-English locale
I am trying to use airbnb react-dates with non-English locale (Persian) and everything is working fine, except for the first day of the month.
The months do not start from the first day in Persian (Jalaali) calendar to the 30th day, they start from…
Moji Izadmehr
- 2,434
- 13
- 19
5
votes
2 answers
Airbnb react date range picker only showing current month calendar not selected dates month calender
I'm trying to add airbnb-react-date. After selecting start date and end date when I am re-opening the date picker the calendar shows current month instead of the selected start date/end date's month.
For example: If I set start date = 2017-05-05 and…
A l w a y s S u n n y
- 36,497
- 8
- 60
- 103
4
votes
2 answers
How to add a select for a year in react-dates?
It's a pain to swipe months right until I get to the right year with react-dates, is it possible to add some select for the year/month?
Evgenia Karunus
- 10,715
- 5
- 56
- 70
4
votes
1 answer
How can I use a custom theme with react-dates?
I'm trying to style my react-dates DayPickerRangeController in Typescript, using react-with-styles and Aphrodite. I'm using this code, emulating the code from https://github.com/airbnb/react-dates#interfaces:
const ThemedStyleSheet =…
MaxGabriel
- 7,617
- 4
- 35
- 82
4
votes
1 answer
using react-with-style to style a react-dates component
I use a react-dates date picker in my site and recently updated to version 16 (from a pre-13 version). Since the new version has pretty different markup from the previous versions, my custom style sheets are irrelevant and instead of customising…
Reason
- 1,410
- 12
- 33
4
votes
1 answer
How to use react dates properly
I'm having trouble with react dates. I end up with this warning:
Failed prop type: The prop `startDateId` is marked as required in `withStyles(DateRangePicker)`, but its value is `undefined`.
Per the documentation, it states that you need to use…
Strahinja Ajvaz
- 2,521
- 5
- 23
- 38
3
votes
0 answers
How can I show a date from previous month in the same week
I'm trying to implement SingleDatePicker with days from the previous month falling in the first/last week of the month shown to be shown in a disabled state.
For example, if my current month in view starts on a Thursday, I want to show 3 days from…
Manoj Sreekumar
- 680
- 3
- 14
- 30
3
votes
1 answer
Airbnb / react-dates | Is there a way to infinity scroll months instead of clicking next month?
I have a react-dates component in a web React app for mobile browsers.
The component displays the month views vertically.
or-yam
- 41
- 1
- 7
3
votes
0 answers
SingleDatePicker not updating once selecting a date
I am trying to use SingleDatePicker within react-bootstrap-table but it does not seem to work. below is my code
class EOLEditor extends React.Component {
constructor(props) {
super(props);
this.updateData =…
shorif2000
- 2,582
- 12
- 65
- 137
3
votes
2 answers
How to change react-dates input border color?
How can I change react-dates input border color depending on a component state?
I want to set the input border to red when there is an error on my form and the normal color when everything is ok.
I'm looking for this but I can't find it.
I'm in…
Vencovsky
- 28,550
- 17
- 109
- 176
3
votes
2 answers
How to show only specific days react-dates
I have array of days.
const availableDates = ["2019-02-01", "2019-02-04", "2019-02-05", "2019-02-06", "2019-02-07", "2019-02-11", "2019-02-12", "2019-02-13", "2019-02-14", "2019-02-15", "2019-02-19", "2019-02-20", "2019-02-21", "2019-02-22",…
Profer
- 553
- 8
- 40
- 81
3
votes
1 answer
CSS Styling with react-dates
Hopefully a simple question with a simple answer, but how exactly do you use custom CSS to style react-date components? The docs on Github are about as clear as mud to me when it comes to CSS and seems to push users to use the theme method...which…
sp8n-4k
- 51
- 1
- 5