Questions tagged [react-datepicker]

React datepicker is a useful component that displays a simplified datepicker, it allows the user to select a date easily without having to know the format that the input expects.

React Datepicker

A simple and reusable datepicker component for React.

Installation

The package can be installed via NPM:

npm install react-datepicker --save

Or by using Yarn:

yarn add react-datepicker

Below are examples which also can be edited directly via the editor on the left side and will be rendered on the right.

Demo Here

490 questions
4
votes
4 answers

Throwing error RangeError: Invalid time value while setting custom date to DatePicker of react-datepicker

I'm trying to set selected parameter as default date of DatePicker of react-datepicker. Basically date which I'm getting from database is in following format: event_date: "2019-06-15" and when I set state, that date shows in this way - event_date:…
Rohit Sawai
  • 739
  • 1
  • 11
  • 28
4
votes
2 answers

react-datepicker, issue with monthsShown by default

We are using react-datepicker for our calendar implementation. the default months shown is controlled by monthsShown datepicker component property. when we say 2- it shows Current Month + Next Month. I am using the reat DatePicker as…
Hero
  • 639
  • 4
  • 12
  • 33
4
votes
6 answers

React-datepicker: enable to set date only if it 18 years old and above

I have a form where a user can submit some info needed One of the fields is a Date of Birth I am using react-datepicker package for that specific field A piece of code looks like this:
3
votes
0 answers

React date range not definable by two clicks, only by dragging

the problem is that range within react-date-range is not definable by two clicks, only by dragging. First click changes startDate and endDate to the same date instead of allowing me to click second time to set endDate. Anyone knows the solution,…
3
votes
0 answers

I am using react datepicker in multistep form i want after selecting date and press continue and move next , when i come back step don't get date

I am using React date picker in a multistep form when I choose date and press continue back and then go to previous step I won't get date picker value I using redux and get data from redux , setValue using it. I am also use react hook form. Please…
Nidhi Mahajan
  • 81
  • 1
  • 7
3
votes
1 answer

date picker component not changing date using onChange

I am trying to use react-datepicker package to create my own date picker component, i have modified some of the basic stuff to have a control on it and it all seems to work but my onChange doesn't change the date on the view... i can see the log the…
newbie
  • 103
  • 2
  • 7
3
votes
1 answer

Problem while changing date in React date picker

In my form I have 2 datepickers,
Jerome Taylor
  • 281
  • 2
  • 12
3
votes
1 answer

Switching between calendar and month picker in react-datepicker?

I need a date picker component for a React project, and after evaluating several candidate libraries it seems React Date Picker (react-datepicker) would match most requirements really well. However, the project design says that when the user clicks…
MJV
  • 1,782
  • 2
  • 21
  • 33
3
votes
1 answer

Using react-datepicker with agGrid

Im trying to incorporate react-date picker with ag-grid ag-grid provides documentation on using custom date picker but with using flatpickr was wondering if anyone has successfully attempted to use react-datepicker with ag-grid and if so, could…
Martina Carter
  • 409
  • 5
  • 18
3
votes
1 answer

react-datepicker with react-final-form

I'm using the react-datepicker inside the react-final-form. I'm using a template with multiple steps https://codesandbox.io/s/km2n35kq3v?file=/index.js. The problem is that I'm not able to integrate the datepicker inside the component. My Code…
luki512
  • 237
  • 6
  • 17
3
votes
2 answers

How to avoid react date picker calendar to open on tab keypress from previous textbox

We have installed react-datepicker component. The default behaviour is that the calendar is getting opened on tab keypress from previous field. How can I avoid this. Please suggest as I am unable to override the default behaviour of this component.…
pratham gn
  • 95
  • 1
  • 4
  • 14
3
votes
1 answer

Save selected date and not utc date in react redux

I tried following this link and find a solution with the help of this question. This question had a part of the information that I need but it did not provide me with an answer. This almost had what I wanted but redux does not let me pass the output…
SoftDev30_15
  • 463
  • 7
  • 20
3
votes
1 answer

React-datepicker date range

I am using react-typescript for my app. I am using React-datepicker package. I want to create one global date range component. So I can reuse it to the different component. I have used React-datepicker's customInput for styling and created buttons…
Krisna
  • 2,854
  • 2
  • 24
  • 66
3
votes
2 answers

How to use react-hook-form with my customized react-date-picker?

I am trying to use react-hook-form with my customized date-picker, but I only see this example (Is it possible to use react-datepicker with react hooks forms?), which is using the default react-date-picker. However, it just only works on the…
theedchen
  • 1,564
  • 4
  • 10
  • 17
3
votes
2 answers

React-datepicker minTime and maxTime not works

I have DatePicker on my form and; i'm using this package: [https://reactdatepicker.com/#example-specific-time-range][1] on the selection start date: I want to make disable all times before the current time. So if now 3 AM. before hours (2 AM, 1 AM,…
user3348410
  • 2,733
  • 10
  • 51
  • 85