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

React Date Picker is Being Hidden Behind Overflow Parent (popover fixed placement issue)

I'm trying to have the date selection popover from react datepicker to open from a material UI menu item. I have made my menu item the react datepicker input field. The issue is that my input field is the anchor for the selection date popover and…
Vincent
  • 129
  • 1
  • 3
  • 7
8
votes
3 answers

React datepicker and typescript

Currently trying to use React and Typescript with react-datepicker. I have a simple setup which I want to test, but I keep getting the following error: Element type is invalid: expected a string (for built-in components) or a class/function (for…
Pimmesz
  • 335
  • 2
  • 8
  • 29
8
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
  • 9,140
  • 15
  • 46
  • 68
7
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…
SK1dev
  • 1,049
  • 1
  • 20
  • 52
7
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
  • 7,733
  • 10
  • 39
  • 73
7
votes
2 answers

Exclude future dates from a given date using React Datepicker

When using the React Datepicker library with Moment.js to manipulate dates, one can exclude given days as captured below and described in the React Datepicker documentation; // Exclude today and yesterday. excludeDates = {[moment(),…
Lizz Parody
  • 1,705
  • 11
  • 29
  • 48
6
votes
0 answers

Add a custom header to react-datepicker when using multiple months

I am currently trying to add a Custom Header to my react-datepicker calendar. However my calendar also displays multiple months so when I use the renderCustomHeader prop, it only adds a custom header to the first calendar displayed and the second…
Duskendale
  • 142
  • 4
  • 13
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
  • 219
  • 1
  • 4
  • 14
6
votes
1 answer

Is there any way to keep date selected on changing Month or Year of the react-datepicker in reactjs?

Currently, in the react-datepicker, I am using Month selector and Year selector for DOB in guest detail form. What happening is:- The selected date is highlighted on the calendar, which is fine. What I need to implement:- When I change Month/Year…
Lanee Barman
  • 93
  • 1
  • 8
6
votes
3 answers

React datepicker cutting calendar on mobile screen

I am using react-datepicker. I have two datepicker in the one line, and it is working perfect on desktop screen but when using it on mobile screen, calendar is cutting from right side as it did not got enough space from right side. Further, It is…
Rajat
  • 486
  • 1
  • 10
  • 35
6
votes
3 answers

React-Datepicker handleChange with multiple name attributes

I have 6 form inputs that are using React-Datepicker. I need to use handleChange() to setState 6 times, but I do not understand how to get the name attribute dynamically from each form input because 'date' doesn't contain any other data when passing…
Matthew
  • 57
  • 1
  • 5
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
4 answers

how to create list of Years in the dropdown using react js JSX

I want to create a list of the Years in react JSX I have a code for the Jquery, please have a look below. var minOffset = 0, maxOffset = 60; // Change to whatever you want var thisYear = (new Date()).getFullYear(); var select = $('