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

react-datepicker why is same day of month highlighted?

If you look at the default example of react-datepicker on their website reactdatepicker.com, you'll see that as you click through different months there is always a day of that month colored blue, which happens to correspond to the day of the month…
dcripplinger
  • 125
  • 1
  • 8
2
votes
2 answers

React date picker filtering dates issue

I'm using https://reactdatepicker.com I seem to be having an issue in restricting weekends as shown in the example. I'm using class component and trying to implement this functional example from the docs: Example from docs: () => { const…
Jack.c
  • 1,035
  • 1
  • 11
  • 14
2
votes
1 answer

Divide code into smaller components ruins state

I have following code: https://codesandbox.io/s/react-datepicerhook-u2vv1 As you can see there is a working date picker and a none working date picker. The two date pickers are very similar so I would like to make a new component that just takes the…
Thomas Segato
  • 4,567
  • 11
  • 55
  • 104
2
votes
1 answer

react-datepicker shouldCloseOnSelect doesn't work

I added a flag, but for some reason the window doesn’t close when choosing a date https://www.npmjs.com/package/react-datepicker
2
votes
3 answers

I am trying use reactdatepicker, but I get error message that setHours is is not defined

I know that this set is supposed to execute on Date objects, but even when I execute on the Date object. The reactdatepicker doesn't work at all. Line 12:3: 'setHours' is not defined no-undef Line 12:12: 'setMinutes' is not defined …
Nick
  • 195
  • 1
  • 3
  • 13
2
votes
1 answer

react datepicker detect month change?

Is there a built in prop that can detect when someone changes the month within the navigation? I need to highlight some specific dates and want to do that calculation when a user decides to change months.
Syn
  • 938
  • 1
  • 10
  • 21
2
votes
1 answer

How to use react-datepicker dateFormat correctly

I am creating a form containing 2 (a start and end ) DatePickers and everything is working fine: I can pick the date and then use the value in the state (it's functional). My issue is that, when picking a date, it doesn't show correctly inside the…
Mohamed Aljane
  • 51
  • 1
  • 9
2
votes
4 answers

Timestamp format is not supporting the React `react-datepicker` as default value

My date-time format from the api result is 2019-12-30T06:16:48.453Z. It is not supported by the react-datepicker. My code is following and is a functional component. I didn't write the complete code below. Added just the required parts. import…
Hareesh
  • 1,507
  • 3
  • 21
  • 43
2
votes
1 answer

How react-date-picker auto correct on raw input

I have to explain the way react-date-picker auto-correct the date when enter raw string into input. For example, I tried on the demo site of react-date-picker. (https://reactdatepicker.com/) I typed 2019ab12 after blur by tab, I got the result…
thelonglqd
  • 1,805
  • 16
  • 28
2
votes
1 answer

How can I get rid of all the extra numbers in this return date from react-date-picker?

I am trying to just show the Month and Day but I am getting "Tue Oct 22 2019 00:00:00 GMT-0700 (Mountain Standard Time)". When using "react-date-picker", how can I just have it return ex: "Tue Oct 22 2019" without resorting to truncating the…
gumball
  • 120
  • 1
  • 9
2
votes
2 answers

React date picker returns invalid date

In google chrome everything works ok. When I open the application in mozilla React Date Picker returns invalid date I tried to use the moment(this.state.startDate).toDate() new Date(this.state.startDate) but it doesn't work class Example extends…
Umbro
  • 1,984
  • 12
  • 40
  • 99
2
votes
1 answer

Calling a function when the datepicker closes, when I click only outside of the datepicker

Is it possible to set the datepicker to close only when I click outside the datepicker? When closing the calendar, if the date was selected, the alertDate function was called? Code here: https://stackblitz.com/edit/react-o8dm7y class App extends…
Umbro
  • 1,984
  • 12
  • 40
  • 99
2
votes
1 answer

How to set custom date to DatePicker of react-datepicker using MomentJS?

I have stored dates in database. I can fetch dates successfully. But when it comes to set any particular date to DatePicker of react-datepicker, I couldn't set that date. Here is code that I have used for fetching dates and setting state with the…
Rohit Sawai
  • 739
  • 1
  • 11
  • 28
2
votes
1 answer

React-DatePicker - Format not Defined

I Tried to Implement React Datepicker Function number 32 https://reactdatepicker.com/. Here is the Documentation Code they provided handleChange (date) { this.setState({startDate: date}) this.toggleCalendar() } toggleCalendar (e) { e &&…
Surya Sekeran 007
  • 23
  • 1
  • 3
2
votes
2 answers

Disable keybord on mobile borwsers when useing React DatePicker

I am using react date-picker and I have a problem on mobile view. The virtual keyboard hides part of my date picker. Any advise?
Wasyster
  • 2,279
  • 4
  • 26
  • 58
1 2 3
…
32 33