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

"findDOMNode is deprecated in StrictMode" using react-datepicker with React-Hook-Form

I'm having an issue when trying to use "showMonthDropdown" or "showYearDropdown" options with react-datepicker. Everything is working great until I click on the years or month Dropdown in the date picker, then I get this error in the console…
Ruby
  • 2,207
  • 12
  • 42
  • 71
2
votes
1 answer

dateFormat in react date picker doesn't work

i wish to get the date in the format yyyy/MM/dd but it doesn't seem to work when i console.log the value { setStartDate(date) console.log(startDate) …
Niresh
  • 67
  • 7
2
votes
0 answers

React datepicker scrollableYearDropdown not starting with the year at top of list

I'm using react datepicker with the scrollableYearDropdown. The issue is that when I click on the calendar and the scrollable year list pops up, the list starts halfway through the list instead of at the top. Is there anyway to get it to start at…
rubyfrancesstack
  • 53
  • 4
2
votes
0 answers

window.scrollTo not working on next js after install react-datepicker

I tried scrolling to the top page when refreshing the page. It's working. fine. useEffect(() => { window.scrollTo({ top: 0, left: 0, behavior: "smooth", }); }, []); Then, install…
Raghuraj Balasubramaniam
  • 217
  • 3
  • 8
2
votes
4 answers

React-datepicker validation using react-hook-form

I want to validate react-datepicker using react-hook-form and when i try it, its not working for me, also the validation message will not display. It is possible to put ref inside the DatePicker? This is the version of react-hook-form that I…
tdmayk
  • 85
  • 1
  • 2
  • 8
2
votes
0 answers

How to fix react-datepicker always moving to next line and pushing others to next line

I have a react component where I render input fields with react-datepicker. The problem is, the react-datepicker element is always moving to the next line instead of all fields being on the same line. Although the top div is declared as flex. If I…
PineCone
  • 2,193
  • 12
  • 37
  • 78
2
votes
2 answers

react-datepicker is highlighting previously selected date, as well as current date on open. How do I prevent this?

I am using the npm package 'react-datepicker'. As you can see in the screenshots below, I am having an issue where if I increment/decrement the date via the left/right arrows, my previously selected date will still appear when I open the date…
Malloc28
  • 77
  • 7
2
votes
1 answer

React Js Time Selector

I have a component like this I want to select the year from the first one, quarter second, and month in 3, but when I select a year and try to select a quarter the year disappears. > code for year Selector
atum45 s
  • 115
  • 1
  • 6
2
votes
1 answer

How do I use the excludeTimes of react-datepicker in a functional component and use the onChange?

The error it says is: ReferenceError setHours is not defined These are the codes. Also, how can I use the onChange value for the react-datePicker? Thank you. import "./styles.css"; import React, { useState } from "react"; import DatePicker from…
JS3
  • 1,623
  • 3
  • 23
  • 52
2
votes
1 answer

Maximum update depth exceeded. in `react-DatePicker` with `Formik`

I'm using react-datePicker package in Formik and this error pops up initially rendering page react-dom.development.js:23803 Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside…
Hithesh kumar
  • 1,008
  • 9
  • 25
2
votes
1 answer

How can I add a date range with a single input to react-datepicker

I want to create a date range component that will fit both start and end dates into a single input. I tried using the example here https://reactdatepicker.com/#example-date-range-for-one-datepicker but it doesnt seem to display the endDate. I've set…
Jub10
  • 183
  • 1
  • 2
  • 15
2
votes
0 answers

DatePicker calendar is hidden behind table header

I'm trying to use react-datepicker in my react-data-grid filter but can't get to show the calendar on top, i tried to set the react popper as suggested here among other configurations but nothing .react-datepicker-popper { z-index: 9999…
Mugiwara Noshanks
  • 39
  • 1
  • 9
2
votes
0 answers

How to turn off auto complete of second react-datepicker input field?

I have an issue with react-datepicker date range inputs, when I write first input field and then starts to type in second one with two same numbers, second input autofills. For example: if I input 22, it auto corrects to 2022-01-01. if I input…
NotsoPr0
  • 101
  • 1
  • 4
  • 10
2
votes
1 answer

react datepicker custom css styling

i have 2 react datepicker in the project Have the custom styling like below in the css file .react-datepicker-wrapper, .react-datepicker__input-container, .react-datepicker__input-container input { display: block; width: 250px; …
Sumanth
  • 159
  • 2
  • 15
2
votes
1 answer

Get only date and give only date as input to react-date-picker

I am using reat-date-picker package and I am in a situation where I want to give input only in date format like 09/23/2020 to reat-date-picker and save the selected value in the same format i.e. 03/22/2020. But if we give only date as input to…
Rich
  • 155
  • 1
  • 8
  • 23
1 2 3
…
32 33