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
1
vote
1 answer

It is possible to parse Date to string

I am using this date-picker https://github.com/wojtekmaj/react-date-picker It has everything on Date objects but i need to somehow parse this to string with this format ( 2020-02-03 16:00 ) i just need to cut the timezone informations. I have this…
Kamil Pinas
  • 39
  • 4
1
vote
1 answer

setValue in react hook form not working with react-datepicker

While i setting value dynamically to react-datepicker throwing an error "RangeError: Invalid time value" This is my datepciker code ( …
Tijo Titus
  • 143
  • 1
  • 8
1
vote
1 answer

how do I set the min and max date for date fields?

I am developing start date and end date field screen using React JS and Bootstrap now I need add validation for end date field. For example : start date 01/01/2021 end date should allow to select from 01/01/2021(start date) up to 3…
K Kumar
  • 131
  • 5
  • 14
1
vote
1 answer

How set the validation between start date and end date should select with in the 3 years

I am new to react JS, how can I achieve the validation between two date fields in React JS. for example: End dates should allow to select only within 3 years based on start date. class MyForm extends React.Component { constructor(props) { …
K Kumar
  • 131
  • 5
  • 14
1
vote
2 answers

How can I set the calendar icon beside the react-datepicker?

How can I place the calendar icon after the react-datepicker? Currently, everytime I'll click the datepicker, it'll go after the line of the date-picker and does not stay beside it. These are the codes:…
JS3
  • 1,623
  • 3
  • 23
  • 52
1
vote
1 answer

Unhandled Runtime Error: Should have a queue. This is likely a bug in React. Please file an issue

I'm facing this error after integrating react-datepicker in my Next.js app. Couldn't be able to fix. Below some code of my app files: package.json "dependencies": { "axios": "^0.21.1", "bootstrap": "^5.0.0", "i18next": "^20.2.2", …
Rashed Rahat
  • 2,357
  • 2
  • 18
  • 38
1
vote
1 answer

Show custom events on specific days in react-datepicker

i am using react-datepicker in my project, i have gone through the documentation but not found the requirements i needed. They are listed below Show custom details on specific days of a month (For eg on 21st june 2021, i want to show "hello" below…
Ratnabh Kumar Rai
  • 554
  • 2
  • 7
  • 24
1
vote
3 answers

How to get live year date in react js?

I want to display a live year date in my footer in react, so it automatically changes every year, but it cant be changed whenever I change my pc clock, I looked in google for an npm or live clock API, but I couldn't find something that can give me…
Abdulrahman
  • 27
  • 5
1
vote
1 answer

How to get react-datepicker in a Component to work

Another noob question. Background: I have a JSP solution and wants to evolve that to a react solution. I've got the most of it to work. It has a few(5) components + index.js. At the moment I'm working on the log display page and need 2…
Beach Bum Bob
  • 21
  • 5
1
vote
1 answer

React datepicker styling

I have a react datepicker (https://reactdatepicker.com/) component in my webpage. Ideally when I tap on the date the popper would act as an element on the page (not a popper). Ideally what it would look like: What currently happens however is…
Hcaz
  • 11
  • 1
1
vote
0 answers

Why react-datepicker manual input doesn't work?

I'm trying to use react-datepicker form with formik and I don't have possibility to input value manually. I have to choose date first so that I can edit date manually, but I can't write it. Did anyone have such problem? const DateComponent =…
arisha
  • 17
  • 6
1
vote
1 answer

using hooks to store state with react-datepicker

I'm trying to render the input values from the start and end dates on the calendar (react-datepicker) component into a list. Currently, I can log the current value but need to figure out a way to store the start and end values in the state. I'm sure…
kapa
  • 35
  • 5
1
vote
2 answers

prevent highlighting of Today in react-date-picker

Couldn't find anything specifically related to this question. I figured out from the other questions about react-date-picker that it's possible to not have today's value selected by default, which is great, and mostly what I'm going for, but I'd…
Ryan Buckley
  • 67
  • 1
  • 9
1
vote
1 answer

React datepicker onchange keypress problem

I use react-datepicker in my project. When I press the key, it completes automatically input. What do I need to change to work correctly like input? Here is the code. https://codesandbox.io/s/nifty-hopper-jm4gx
okh
  • 75
  • 1
  • 9
1
vote
2 answers

How can we customize react-datepicker navigation buttons (--next and --previous )

I am using reactDatePikcer and needs to change next and previous navigation with some other icons. Can't see any API to change next and previous buttons.
As3Script
  • 137
  • 4
  • 16
1 2 3
…
32 33