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

305 questions
22
votes
4 answers

React-datepicker with a Formik form

I'm trying to use react-datepicker in a Formik form. I have: import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; class Fuate extends React.Component { state = { dueDate: new Date() …
Mel
  • 3,699
  • 13
  • 71
  • 194
20
votes
1 answer

Is it possible to use react-datepicker with react hooks forms?

Is it possible to use react-datepicker with react hooks forms? I tried following sample: https://codesandbox.io/s/awesome-shape-j0747?fontsize=14&hidenavigation=1&theme=dark But with no luck. import React, { useState } from "react"; import…
Thomas Segato
  • 3,137
  • 3
  • 33
  • 63
20
votes
6 answers

Change locale in react-datepicker

I am using react-datepicker NPM package, I tried to follow documentation but I was unable to import registerLocale and setDefaultLocale from react-datepicker Do you see where I make mistake? import DatePicker from 'react-datepicker'; ... …
Stevan Tosic
  • 4,074
  • 4
  • 34
  • 83
18
votes
6 answers

Set timezone React-Datepicker

I'm using the react-datepicker to let user select a date. However, right now it uses local time (PDT), but I want to hardcode it to use a specific timezone (PST). I tried using utcOffset prop but it doesn't seem to be doing anything. Does anyone…
MarksCode
  • 5,456
  • 12
  • 42
  • 95
13
votes
4 answers

React Datepicker exclude past dates

I'm using this lib in my app: https://reactdatepicker.com/ There is an excludeDates prop which I can use, where I can pass a list of dates aka this would exclude today and yesterday: excludeDates={[moment(), moment().subtract(1, "days")]} I would…
penguinsource
  • 919
  • 3
  • 14
  • 35
12
votes
8 answers

react-datepicker input width will not adjust to 100%

I am attempting to adjust the width of the react-datepicker input box and surprisingly have found little information out there and am unable to effect its width. I would just like to make the input width 100% of its containing div. Expected…
Rbar
  • 3,112
  • 8
  • 30
  • 59
11
votes
1 answer

How to implement validation/restriction in react-datepicker

I am trying to implement restriction or validation in a react-datepicker component. I am using redux-form for validation and normalization(to implement restriction) https://redux-form.com/6.0.0-rc.1/examples/normalizing/ Question : I have observed…
Ayesha Mundu
  • 876
  • 2
  • 10
  • 17
9
votes
1 answer

Add style/class to react-datepicker

So basicly how do I add a css class? I've given this a go but it ain't working:
Ed Lynch
  • 545
  • 2
  • 7
  • 21
7
votes
1 answer

react-datepicker styles are not being not applied on deployed build

I'm using the react-datepicker npm module and its styles got broke (styles are not being applied) when I deploy the build, it's working fine in the local environment. I've imported its styles like this: import…
Jappreet
  • 71
  • 1
  • 6
7
votes
4 answers

How can I change the format for react datepicker days of the week?

I am using React Datepicker and all is working great. Instead of having "Su" "Mo" "Tu" etc. for days of the week, I'd like to use something like this: "Sun" "Mon" "Tue" I am accomplishing this via css: .react-datepicker__day-name { ... …
Damon
  • 3,202
  • 4
  • 30
  • 64
7
votes
1 answer

How to clear the value entered in react-datepicker?

I am using react-datepicker for our calendar control. Now the issue is that if the user entered an invalid date like 'djfdjfhjkhdf' then in this control nothing is there to validate. So I decided to write my own validation function and call that on…
Gorakh Nath
  • 6,352
  • 11
  • 33
  • 58
6
votes
1 answer

Datepicker component breaking an edit screen, using @unform and react-datepicker

I created the following component to select dates in UnForm: export default function DatePickerInput({ name, ...rest }) { const datepickerRef = useRef(null); const { fieldName, defaultValue = '', registerField } = useField(name); const [date,…
Raphael Prado de Oliveira
  • 189
  • 1
  • 2
  • 12
6
votes
2 answers

Unable to resolve "fbjs/lib/areEqual" from "node_modules\react-native-gesture-handler\createHandler.js"

I'm building a react-native application with expo, however, I have an error, therefore I'm unable to continue building the application. I even looked for the file in node_modules that is mentioned in the error message. I'm using the…
SK7
  • 1,097
  • 9
  • 20
6
votes
1 answer

Ways to fix a child component that is not re-rendering (due to change in data being passed in as props, not state)?

Background I am working on a Meteor app that uses ReactJS as the rendering library. Currently, I'm having trouble with having a Child component re-render when data has been updated, even though the parent is accessing the updated data & supposedly…
Mia W
  • 63
  • 6
6
votes
1 answer

Cannot read property 'selectionEnd' of null using React + Jest + Datepicker + TextMask

I had a unit test that was working, but now I added a new package to my react-datepicker, called react-text-mask and I tried to mock it, but it receive the following message when I run npm run test: TypeError: Cannot read property 'selectionEnd' of…
Felipe Augusto
  • 5,811
  • 7
  • 29
  • 60
1
2 3
…
20 21