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

Datepicker not clearing the edge of table

I'm having a rather stubborn DatePicker that I can't seem to get to behave. I'm using react-datepicker's DatePicker component. I have a table, where each row has a DatePicker. Opening the calendar view of the date picker seems to not clear the edge…
Electric Coffee
  • 11,733
  • 9
  • 70
  • 131
1
vote
1 answer

react-datepicker Date error with hookstate and nextjs

Here's a page in nextjs: import type { NextPage } from "next"; import DatePicker from "react-datepicker"; import { useState as useStateHook } from "@hookstate/core"; import { useState as useStateReact } from "react"; const PageDate: NextPage = ()…
Lucas Steffen
  • 1,244
  • 2
  • 10
  • 22
1
vote
0 answers

React-DatePicker giving default values on wrong format

I am using react-datepicker. My date picker format is MM/DD/YYYY but when I am writing DD/MM/YYYY (31/12/2020) and typing 3 in date picker it's moving to march month in the date picker and after completing full date and coming out of date picker its…
Nisha
  • 11
  • 1
1
vote
1 answer

How to set initial date in react-datepicker with Formik?

I get my date and time as string in UTC (2021-12-24T18:30:00+00:00) and try to set it as initial date for DatePicker. The issue is that I get string in UTC instead of specified format initialy. After I change value manually everything is…
KrolikowskiK
  • 11
  • 1
  • 4
1
vote
0 answers

Set custom position to the calendar with position:fixed

I use react-date-picker and want to show the popuped calendar over the modal. When I set the new styles for position:fixed, top and left in onCalendarOpen() it works properly and set the position where I want. But when I close the calendar and open…
Ivaylo Genchev
  • 11
  • 1
1
vote
1 answer

Iterating through JSON and adding to array, but preventing multiple additions to the array

What is the best way of iterating through a JSON response, and inserting specific elements of the JSON element into an array (assuming I'm using React hooks). This is my attempt, but the issue is the first time I execute the function, I get no…
Celloman
  • 25
  • 4
1
vote
2 answers

Get React DatePicker date value in onChange

I'm using react-datepicker, and I'm unable to get the actual date in onChange. This is my component : import DatePicker from "react-datepicker"; const DatePick = () => { return (
Dwix
  • 1,139
  • 3
  • 20
  • 45
1
vote
0 answers

Dissalow users to chose the same day for date range, react-datepicker

I have a date range using react-datepicker (with selectsRange) My code snippet looks like:
Alexandre Adereyko
  • 438
  • 2
  • 4
  • 12
1
vote
1 answer

react-datepicker and react-hook-forms: required not working

React-datepicker and react-hook-form. I am trying to make react-datepicker required, but its not working (
Santhosh
  • 9,965
  • 20
  • 103
  • 243
1
vote
0 answers

onChange in Controller of react-hook-forms not updating date field in formFiledArray?

I have a rather complex set up using react-hook-forms using formFieldArray and react-datepicker. The form allows a user to select a drop down item and a range of dates and then add one or many to the form itself before submit. I'm using…
Demian Sims
  • 871
  • 1
  • 14
  • 29
1
vote
0 answers

How to select time and date range with React DatePicker

I'm using React Date Picker and I need to include time along with Date range for a single input. I didn't find any example from documentation how to implement this. Does DatePicker provide any functionality ? the component is written as after…
Suman Nunia
  • 11
  • 1
  • 3
1
vote
1 answer

Using a callback on click of react-date-range defined ranges

How can we add a callback when clicked the encircled ranges? I want to change the input placeholder based on the range picked. For example the user clicked "This week" so the placeholder also on the right should be changed to "This week". I've red…
Chadric Gotis
  • 117
  • 1
  • 13
1
vote
0 answers

How to unload a DatePicker component so that it loads again with default values when page is re-rendered

I have a single page application (singleSPA) that has a airbnb DatePicker in the second page. When I load the app for the first time, the DatePicker loads default startDate and endDate correctly. However, when I come back to the first page and go to…
beedeegeezz
  • 29
  • 6
1
vote
1 answer

Uncaught RangeError: Invalid time value on react-DatePicker

I have a React component as Form which has some text input and a DatePicker control. I display the inputs on a table using react-bootstrap-table-next library, which can't display date directly form DatePicker and I need to convert first as…
PineCone
  • 2,193
  • 12
  • 37
  • 78
1
vote
0 answers

Is there a way to highlight specific months in reat-datepicker Month picker?

I'm trying to highlight specific months in showMonthYearPicker, just like in the default datepicker. I tried few options, none work. Can someone help to figure out a way to do that? …
Arik Mimran
  • 51
  • 8
1 2 3
…
32 33