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
48
votes
6 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
  • 2,481
  • 26
  • 113
  • 273
46
votes
3 answers

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
  • 4,567
  • 11
  • 55
  • 104
31
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
  • 6,561
  • 10
  • 55
  • 110
28
votes
8 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
  • 8,074
  • 15
  • 64
  • 133
27
votes
5 answers

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
  • 368
  • 1
  • 3
  • 8
23
votes
13 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,740
  • 9
  • 39
  • 69
19
votes
6 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
  • 1,120
  • 3
  • 16
  • 40
14
votes
2 answers

How to make react-datepicker start the days of the week on Monday?

I'm using react-datepicker along with date-fns to display a date picker with Hungarian locale in my Web app, but I couldn't find a way for it to display the dates of the week starting with Monday instead of Sunday as per Hungarian conventions. The…
Szelmat
  • 189
  • 1
  • 3
  • 10
12
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
  • 1,075
  • 2
  • 11
  • 18
11
votes
5 answers

Argument of type 'Date | null' is not assignable to parameter of type 'SetStateAction'

I am following the Ionic tutorial for react. I created the tutorial page and I am trying to add a datepicker element to it. This is my page right now: import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react'; import React,…
Tasos
  • 1,575
  • 5
  • 18
  • 44
11
votes
6 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
  • 4,151
  • 13
  • 52
  • 108
11
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
  • 615
  • 4
  • 10
  • 28
10
votes
3 answers

How to customize the style in react-datepicker?

I want to change the style of react-datepicker: 1.change the input box to a customized style 2.change the style and the language of the calendar I saw a post (Custom Input Field on datepicker, [react-datepicker components]…
Lusha Li
  • 1,068
  • 2
  • 11
  • 22
9
votes
3 answers

React datepicker disable entering date manually

I am using React date-picker for my form. Currently it's working well, but the user can delete the date and enter whatever values. How do I restrict it? This is my code: import DatePicker from "react-datepicker";
Kumara
  • 471
  • 2
  • 10
  • 33
9
votes
6 answers

I'm having trouble with react-datepicker position

I'm using react-datepicker but for some reason it is showing the calendar behind a container. I have tried: .react-datepicker-popper { z-index: 9999 !important; } but it doesn't work. Here is the Date Picker component
Alex Yepes
  • 1,160
  • 1
  • 9
  • 21
1
2 3
…
32 33