Stack Overflow
Stack Overflow

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
5
votes
1 answer

react-datepicker time selection with seconds

I need to choose seconds also from react date picker . I had gone through out the docs found this In this solution i can select hour,min,AM/PM from this but no option for seconds is there any way to customize to select seconds also from this.help…
Dev
  • 179
  • 6
  • 13
5
votes
2 answers

Custom react datepicker with typescript

I'm trying to create a custom datepicker following the instructions in documentation and after a long time I was able to do, but I'm still receiveing an error that says "Function components cannot be given refs. Attempts to access this ref will…
Eduardo Ribeiro
  • 97
  • 1
  • 9
5
votes
2 answers

React Datepicker How to format date from string

my goal is simple, displaying a date from database in react datepicker. From my database, I got the string "2019/10/26 15:05", but when setting it as selected it returned, Starting with v2.0.0-beta.1 date-fns doesn't accept strings as arguments.…
Matius Nugroho Aryanto
  • 801
  • 3
  • 17
  • 41
5
votes
2 answers

React datepicker - invalid time value

I am trying to create a React-datepicker; however, I am getting this error: RangeError: Invalid Time Value I added a dateFormat to match my date variable; however, I am still getting the same error? What am I doing wrong? import DatePicker from…
sah
  • 155
  • 1
  • 1
  • 13
5
votes
1 answer

React-Datepicker: How can I change the navigation arrows?

I have a situation, where I am supposed to change the navigation arrows available by default in react-datepicker component. What did I found and tried? I found the datepicker uses a button tags and uses the class to apply the icons as below:
OM The Eternity
  • 15,694
  • 44
  • 120
  • 182
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
2 answers

Force react-datepicker to use UTC

If selected starts out as null. When I select a date 20/04/2022 Datepicker shows 20/04/2022 Console.log shows Wed Apr 20 2022 00:00:00 GMT+0200 (Central European Summer Time) But my payload on the form shows 2022-04-19T22:00:00.000Z Can I lock the…
ComCool
  • 773
  • 4
  • 15
  • 28
4
votes
0 answers

React Datepicker include days in the future without weekends

I'm using React Datepicker found here: https://reactdatepicker.com/#example-11 What I'm trying to do is only allow the user to select a day UP TO 3 "business" days in advance. Using filterDate I was able to filter calendar to only display weekdays.…
hisusu32
  • 437
  • 7
  • 22
4
votes
3 answers

how to prevent react-datepicker from pushing inline elements to new line on toggle?

When using react-datepicker with 2 adjacent elements, the second element gets pushed to the next row during the first element's click event. Before: After: MRE: import DatePicker from 'react-datepicker'; const DateRangeInput = () => ( <> …
Lord Elrond
  • 13,430
  • 7
  • 40
  • 80
4
votes
2 answers

react-datepicker remove coloring of same day in other months

If you look at the default implementation of the react-datepicker the day of this month will be highlighted on every month. Is there a way to only highlight/color the day of the current month and not highlight this date in all other months? If you…
Stephen
  • 913
  • 3
  • 24
  • 50
4
votes
2 answers

react-hook-form controller with validation based on value

I am using react-hook-form library and have a controller for a date picker According to the documentation, the rules should work exactly as the validation set inside the register. It works with { required: true }, but when needing to take into…
user3808307
  • 2,270
  • 9
  • 45
  • 99
4
votes
3 answers

unable to display only year in react datepicker

Here is my below custom component for datepicker with yyyy format return (
Abhishek Konnur
  • 503
  • 1
  • 9
  • 33
4
votes
4 answers

React datepicker set min and max date

I am using react-datepicker in my project. I need to display only days for a specific month (lets say February 2020). I was under the impression that I could pass iso dates as minDate and maxDate but this does not seem to work. My code: const…
greatTeacherOnizuka
  • 555
  • 1
  • 6
  • 24
4
votes
2 answers

React Datepicker. How to save time in state?

Currently, I'm creating a mini-project in order to learn React. I'm using React Datepicker for my booking page. It's easy to save a chosen date in state: state = { startDate: new Date(), time: null } handleChange = (date)…
Xenia
  • 85
  • 1
  • 8
4
votes
1 answer

How to make disabled date and time in react datepicker?

For example: today is August 23 at 4 pm. I make to disabled dates until 22 (I used minDate = {moment ().toDate ()}). How to make disabled time in this case up to 16 (include)? That you cannot choose a date and time earlier than at the present. I…
Umbro
  • 1,984
  • 12
  • 40
  • 99
1 2
3
…
32 33