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

React datepicker parsing selected date

I have the following component: import React, {Component, Fragment} from 'react'; import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; // import PropTypes from 'prop-types'; class Form extends Component { …
Aessandro
  • 5,517
  • 21
  • 66
  • 139
0
votes
0 answers

How can I update React Date Picker every time select box is selected

I have a requirement to allow a user to update the initial start date and end date and that be calculated into a number of days value between the start date and end date. For instance if the start date is 04/18/19 and the end date is 4/20/19 the…
Amen Ra
  • 2,843
  • 8
  • 47
  • 85
0
votes
1 answer

react-datepicker accepting older dates those are disabled using minDate property

I am using react-datepicker just like below having minDate property. { this.props.onGrantExpiryDateSubmit(e); }} …
Mr. Roshan
  • 1,777
  • 13
  • 33
0
votes
1 answer

React Datepicker doesn't work properly if events-polyfill is imported

I have done the basic set-up for the react-datepicker package and it was working. However, in our app, we are also using events-polyfill package. And when these two packages are used at the same time, react-datepicker doesn't work properly. import…
catandmouse
  • 11,309
  • 23
  • 92
  • 150
0
votes
1 answer

Highlight next 2 weeks in react datepicker

I want to highlight the next two weeks from the current date. I am using react-datepicker module. I used the below code: var currentDate = new Date(); var numberOfDaysToAdd = 13; const daysHighlighted = new…
Rajat
  • 486
  • 1
  • 10
  • 35
0
votes
2 answers

Highlight date of next 2 weeks from current date in react-datepicker

I am using react-datepicker. I am trying to highlight the dates of next 2 weeks from the current date.I used the below code: var endDate = new Date(); var numberOfDaysToAdd = 13; endDate.setDate(endDate.getDate() + numberOfDaysToAdd); var currDate…
user10742206
0
votes
1 answer

"Warning: Failed prop type" When using react-datepikcer with redux-form

I'm using "react-datepicker" alongside "redux-form", and I keep getting this error in the console ... Warning: Failed prop type: Invalid prop `selected` of type `String` supplied to `DatePicker`, expected instance of `Date`. The new version of…
Ruby
  • 2,207
  • 12
  • 42
  • 71
0
votes
1 answer

React Datepicker won't shrink to parent container

I'm having a difficult time getting react-datepicker to shrink to its parent container within my code. I have found suggestions on giving it a new stylesheet here, but I'm not sure what is the recommended way for styling a pre-made react component.…
Ianohurr
  • 129
  • 3
  • 10
0
votes
2 answers

"Unexpected token" will trying react-datepicker

I'm trying to set up the code provided on the page of the react-datepicker. My build toolchain is composed of npm and browserify. I have the following package.json { "name": "datepicker", "version": "1.0.0", "description": "", "main":…
Jérôme B
  • 420
  • 1
  • 6
  • 25
0
votes
1 answer

Compare two dates in react

I am using react-datepicker. Here is the docs link. I have two input box for dates.One is for "Starting date" and another is for "ending date". what i need is end date is not less than the starting date. I am running the below code which is not…
user10298495
0
votes
1 answer

To click on image-icon, of input box of react-datepicker are not working

here in Pseudocode I am using the image-icon my datePicker and it is opening with action. But when i am clicking on IMAGE-icon it's event doesn't persist. Problem with layerIndex, image appears top of input box so, event could not occurs onChang of…
Anupam Maurya
  • 1,927
  • 22
  • 26
0
votes
2 answers

React-datepicker doesn't render, variant error

I've been stuck in an issue for 2 to 3 days. This is my package.json file { "dependencies": { "autoprefixer": "^7.1.1", "babel-core": "^6.26.3", "babel-loader": "7.x", "babel-plugin-syntax-dynamic-import": "^6.18.0", …
user6300411
0
votes
3 answers

Don't allow time change React-DatePicker

I'm using the React-DatePicker package along with momentjs to let the user pick a date on an input which looks like this: I want to display the time, but not let the user change it directly from the . My date picker has an onChange()…
MarksCode
  • 8,074
  • 15
  • 64
  • 133
0
votes
0 answers

formsy-react and react-datepicker not working together

I have a formsy form with a bunch of Inputs. I can see the value of those inputs in the onValidSubmit function. One example of such an input is the following:
Alejandro Martinez
  • 163
  • 1
  • 10
0
votes
2 answers

Select and update date in only selected div using react-datepicker

I am developing a react application. I have 3 div, each have DatePicker component. I want to update the date of selected. When I change the date, it gets updated every div. Here is code - import React, { Component } from 'react'; import…
Santraj Kumar
  • 215
  • 1
  • 2
  • 11
1 2 3
…
32 33