react-datepicker Questions

7

Solved

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 &quo...
Decadent asked 26/7, 2021 at 10:4

7

Solved

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 mista...
Eruptive asked 28/1, 2019 at 9:39

7

Solved

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: excludeDat...
Clearcut asked 31/5, 2018 at 14:41

6

Solved

I have a form where a user can submit some info needed One of the fields is a Date of Birth I am using react-datepicker package for that specific field A piece of code looks like this: <lab...
Tea asked 11/10, 2018 at 12:18

3

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 becaus...
Hypocrite asked 6/12, 2018 at 22:28

13

Solved

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...
Foothill asked 6/8, 2018 at 15:8

3

Solved

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 l...
Dorso asked 26/3, 2020 at 9:52

3

Solved

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 ...
Bounded asked 14/1, 2020 at 13:39

2

Solved

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 i...
Sawfish asked 2/7, 2021 at 22:12

5

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 ...
Rosenzweig asked 20/11, 2019 at 13:8

10

I'm using react-date-picker, but on mobile the native keyboard shows up when clicked causing the date-picker to open on top, which doesn't look great. The online solution is to put the readonly att...
Hydrokinetic asked 15/2, 2018 at 10:32

3

Solved

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...
Shot asked 8/10, 2020 at 0:58

2

If selected starts out as null. When I select a date 20/04/2022 Datepicker shows 20/04/2022 Console.log shows Wed Apr 20 2022 00:00:00 GMT+0200 (Central European Summer Time) But my payload on the ...
Quinta asked 28/3, 2022 at 10:58

5

Solved

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, IonT...
Betaine asked 27/12, 2019 at 7:39

8

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 ...
Kelleher asked 29/10, 2018 at 18:50

6

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 thi...
Jerkwater asked 14/6, 2019 at 17:59

6

Solved

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 th...
Microbarograph asked 17/11, 2020 at 19:41

4

Solved

I am using react-datepicker in my project. I need to display only days for a specific month (lets say February 2020). I was under the impression that I could pass iso dates as minDate and maxDate b...
Nicollenicolson asked 16/2, 2020 at 18:14

3

Solved

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 n...
Irrawaddy asked 2/1, 2019 at 8:14

6

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 ...
Thatch asked 26/5, 2019 at 9:42

3

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, [...
Augustaaugustan asked 31/12, 2018 at 19:51

2

Solved

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 y...
Streamlined asked 13/5, 2018 at 20:43

2

Solved

If you look at the default implementation of the react-datepicker the day of this month will be highlighted on every month. Is there a way to only highlight/color the day of the current month and n...
Teirtza asked 6/8, 2020 at 13:35

0

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 head...
Leveloff asked 14/7, 2020 at 16:40

1

Solved

I created the following component to select dates in UnForm: export default function DatePickerInput({ name, ...rest }) { const datepickerRef = useRef(null); const { fieldName, defaultValue = ''...
Motherinlaw asked 27/5, 2020 at 16:17

© 2022 - 2025 — McMap. All rights reserved.