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
3 answers

Previous Date get selected of min date react-datepicker

I have used minDate={moment(new Date('1-01-1970'))} but I am able to select 31/12/1969. Set any min date in react date picker able to select the previous date. I am using react-datepicker npm link https://www.npmjs.com/package/react-datepicker Any…
pareshm
  • 4,874
  • 5
  • 35
  • 53
2
votes
0 answers

How to get string value from react-datepicker 2.0.0 input?

Struggling to get dates as strings from react-datepicker in React/Redux app. Back-end services operates with date fields as strings in format specific to front-end user language settings. Therefore it is easier to store dates as strings in Redux. In…
5andi5
  • 234
  • 4
  • 10
2
votes
1 answer

Javascript airbnb react-dates showClearDate throwing

I am trying to get the clear date button appearing on the SingleDatePicker. Looking at the documentation all I have to do is add the showClearDate attribute to the SingleDatePicker. This is how I've implemented it:
codetemplar
  • 671
  • 6
  • 19
2
votes
0 answers

react-google-maps InfoBox not working with react-datepicker

So, the main problem is that the component InfoBox won't allow "onChange" handlers (I presume). I need that specific one because the 3rd party component (react-datepicker) uses the "onChange" handler to set the date. Digging through the official…
2
votes
0 answers

react-datepicker Maximum update depth exceeded

I am using react-datepicker with redux-form as described in this thread but when I change the datetime format from "LLL" to "mm:HH YYYY:MM:DD" I keep getting this error Uncaught Error: Maximum update depth exceeded. and the datepicker is…
2
votes
1 answer

Layout of datepicker inside a modal was broken

I built a website using React. I have a datepicker inside a modal. The problem is when I clicked on the date, the layout of the datepicker was broken. Is there a way to solve this? import DatePicker from 'react-datepicker' import { Grid, Col, Row,…
user9920003
2
votes
2 answers

How do I facilitate easy year-to-year navigation using react-datepicker?

I was thinking of having some double arrows that allow year scrolling similar to the month scrolling ones. Other ideas on how to reach the main goals are more than welcome. GitHub link: https://github.com/Hacker0x01/react-datepicker
JustANoob
  • 93
  • 2
  • 10
2
votes
4 answers

How to disable component on a button click

I have used a date picker component from react-date-picker. I need to disable the entire date control and the button itself on a single button click. The button does get disabled but the DatePicker component doesn't. I have tried the following but…
PineCone
  • 2,193
  • 12
  • 37
  • 78
2
votes
2 answers

ReactJS Datepicker - I want the datepicker to start from this month and on only

How can I make that ReactJS Datepicker should only display days starting from this month and on (no back dates).
Morris S
  • 2,337
  • 25
  • 30
2
votes
0 answers

Including react-datepicker through CDN through uncaught error

Hi i am very new to Reactjs. instead of setting up webpack and babel, i am executing examples with React cdn references.i also want to use react-datepicker component,when i included this through cdn it throughs some error,guys help me out how to get…
yasarui
  • 6,209
  • 8
  • 41
  • 75
1
vote
0 answers

Formik submit button not triggered

I have a React form created with Formik & Yup and I have a little problem with the submit button. The error message will be displayed if I try to click on an input field and leave. If an error message is displayed and I click the "Save" button, all…
SnNaCk
  • 2,370
  • 2
  • 5
  • 16
1
vote
0 answers

MUI date picker, add custom values to date picker

I want to add custom values to the date picker, a percent value to the day. Can refer to below screenshot currently i am using mui date picker and able to display it using below code import { DatePicker } from…
Karan Dumbre
  • 33
  • 1
  • 8
1
vote
0 answers

is there a way for my React Date Picker to be centred directly below the MUI TextField

I am having some styling issues with the react date picker: I need the date picker to be centred directly below the MUI TextField I need the arrow icon pointing to the text field to be the same color as the header theme.palette.primary.main const…
1
vote
0 answers

How to change width and other classes in react-datePicker using react-emotion

I'm using react-datePicker and I want to style container and few other classes using emotion-react. Can You please suggest how should I properly do it ? My datePicker looks like this:
marcinb1986
  • 708
  • 1
  • 11
  • 30
1
vote
0 answers

Unable to update date_of_birth field using react & Django rest framework

I am making a react social media app which allows users to update their profile. I have setup a backend api using Django rest framework. My current issue is that when I add the date_of_birth field, the form won't submit, without this field…