490 questions
0
votes
1
answer
63
views
React-datepicker stay placeholder and dividers like in native HTML
I'm new to React and since I needed to restrict the native <input type="date"> (e.g. grey out weekends and UK bank holidays), I switched to react-datepicker where it's available.
Now I'...
0
votes
2
answers
61
views
React DatePicker flashes inside React Hook Form Controller render prop
I'm using react-datepicker inside a Controller from react-hook-form. The component works, but I'm seeing a strange issue:
Every time I interact with the DatePicker (e.g., select a date), the component ...
0
votes
0
answers
48
views
React-DatePicker component closing on custom header month selection
I'm having a hard time making a custom header for my react datepicker component.
Anytime I click on any month or the popover itself, it closes the whole datepicker component and does not change the ...
0
votes
1
answer
46
views
TypeError: i2.props.onFocus is not a function
I am importing ReactDatePicker like this const ReactDatePicker = lazy(() => import('react-datepicker'));
Using same code in two different components. It's giving TypeError in one component but not ...
0
votes
0
answers
30
views
React-Dates DateRangePicker: Start Date Appears Disabled When Switching from End Date
I am using the library 'react-dates' DateRangePicker in my React project.
I have implemented logic where:
The start date should be selectable at any time.
The end date should only be selectable after ...
1
vote
1
answer
419
views
Error with React-TailwindCSS Datepicker in React 18: Cannot read properties of undefined
I am trying to add the react-tailwindcss-datepicker to my project by following the documentation here:
https://react-tailwindcss-datepicker.vercel.app/install
However, I'm encountering the following ...
0
votes
1
answer
58
views
DatePicker: Dynamic Border Color Based on Validation
I'm using react-datepicker and react-input-mask to create a controlled date input. I want to update the input border color dynamically:
Default state: Initial styles.
On focus: When the input is ...
0
votes
1
answer
65
views
Dynamic import react-datepicker with next/dynamic
I want to dynamic import react-datepicker with the following:
import dynamic from 'next/dynamic';
const DatePicker = dynamic(() => import('react-datepicker').then(mod => mod.default), { ssr: ...
0
votes
1
answer
62
views
Common component react-datepicker inclusion for React application
I have common react-components like Button, Checkbox, Datepicker etc.,. I am transpiling using the rollup.config.js. For date picker I am using react-datepicker. All these components are used in all ...
1
vote
0
answers
54
views
antd Trigger onChange event manually instead of waiting for clicks
I'm using antd RangePicker version 3.22.0. I've defined an onCalendarChange function that given a single choice, forces the other choice, thus negating the need for a second click.
Problem is, the ...
1
vote
1
answer
111
views
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) in custom npm package
I'm working on a custom npm package (private) with a theme so I can use it across all my projects.
I'm using react-datepicker in my package to create a custom DatePicker component
I have no trouble ...
-1
votes
1
answer
127
views
In a react typescript code, i am getting ts 2322
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/...
3
votes
1
answer
152
views
Why is excludScrollbar property required for react-datepicker?
I want to make a wrapper for a component. To pass all its properties I use DatePickerProps from the react-datepicker import. Why is the excludeScrollbar property required?
https://codesandbox.io/p/...
0
votes
2
answers
204
views
react-datepicker anchorDirection="bottom" not working [closed]
I am using react-datepicker to display a time picker component but I want the time list to be displayed in the bottom of input component but it's currently showing on top of the input field.
code :
&...
0
votes
1
answer
555
views
React DatePicker not getting closed after the date selection
I am trying to use react-hook-form with react-datepicker. I am using a button to open the datepicker, and trying to close it once the selection of a new date is made.
Below is the code-sandbox I made ...
0
votes
0
answers
78
views
The icon appears above the text in DatePicker
In my react app I'm using react-datepicker, I added an icon using the showIcon property and it appears above the text. It might be because I'm using right-to-left bootstrap. What can I do to move the ...
0
votes
1
answer
600
views
React DatePicker - Click outside day of month and calendar auto close, can't not select end date?
React DatePicker - Click outside day of month and calendar auto close, can't not select end date?
When i clicked April 30 then React DatePicker auto close. And I not choose end date.
enter image ...
0
votes
1
answer
301
views
How to hide the react-datepicker header?
I'm trying to hide the header in the react-datepicker. And from what I read it should just be the tag hideHeader. but it does not seem to be working for me.
according to this, the feature was added in ...
0
votes
1
answer
1k
views
How can I use a localized date format with react-datepicker?
I'm using react-datepicker with react-intl. What I want is for the date in the date picker to look like "Jan. 1, 2024" in en-US, and the correct equivalent for other locales. I believe this ...
1
vote
1
answer
597
views
Place calendar below input with "react-datepicker" library
I use the react-datepicker library to select dates from the calendar in my react project with typescript.
I would like to display the calendar always at the bottom of the input.
This is how I ...
0
votes
1
answer
1k
views
Changing the background color of react-datepicker Calendar
I am using react-datepicker. Here, I have a calendar like this one:
I have a class component and inside this class component, I have a method named renderDate() method. From the class components ...
0
votes
0
answers
123
views
MUI X Date Picker bugging on Thinkpad
Very weird bug suddenly appeared.
Current "@mui/x-date-pickers": "^6.9.0" - hasn't been changed for a year.
So suddenly it started bugging out on some windows laptops specifically ...
0
votes
2
answers
1k
views
Highlight dates on react-datepicker
I have an array of dates in "MM/DD/YYYY" format. But passing this array via the hightlightDates prop to react-datepicker is not highlighting the days on the calendar. How can I accomplish ...
0
votes
1
answer
251
views
Save date in given timezone
I'm using react-datePicker library which takes new Date() as input.
Here I'm taking input date, time & timezone. How I can save this in the backend such that if the user selects the date Feb 10 ...
0
votes
1
answer
523
views
How to remove unwanted times in react-datepicker?
I want to only show the times between 9:00 and 5:00pm. Instead, they are only grayed out:
When I use:
import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-...
-3
votes
1
answer
185
views
Why is the styling for my React Datepicker so poor?
I'm creating a web app and ios app simultaneously using react native via expo. I wanted to create a form that takes in a date. I use React's provided Datepicker, but I'm having issues with styling.
...
0
votes
1
answer
31
views
Why is my code not reflected properly during rendering for unit test
I have this test
describe('Effective Date', () => {
test('User select or key in valid date', async () => {
debug();
const effectiveDate = screen.getByTestId('effectiveDateinput');
...
0
votes
2
answers
199
views
react-datepicker throws error invalid time value
Error image
const [startTime, setStartTime] = useState(moment(new Date()).toDate());
<DatePicker
showIcon
selected={startTime}
onChange={(date) => handleStartDateChange(date)...
1
vote
1
answer
68
views
Objects are not valid as a React child using DatePicker
I'm trying to pass a Date object as payload to my formSlice but I keep getting the Error that Objects are not valid as React child or Invalid time Range when I pass the date as string with ToString() ...
1
vote
0
answers
62
views
How can I show date from database in datePicker input field
I am trying to build an form to edit data, and I cannot figure out how to show the date from database (mongoDB) in the date picker input field. I'm using a formik and a react datePicker in a ...
1
vote
0
answers
218
views
My React application is running on React 17, while updating to latest React 18 version
My React application is running on React 17, while upgrading to latest React 18 version, below packages were upgraded with latest version, due to that not able to see the buttons and icons with below ...
0
votes
1
answer
572
views
react date picker some dates can not be selected
I am using a react date picker, like:
<DatePicker
selected={selectedDate}
onChange={handleDateChange}
minDate={new Date()}
className="form-control"
/>
this is what it looks like,...
0
votes
1
answer
639
views
React Datepicker Error: Cannot read properties of null (reading 'usestate')
I'm creating a test for the react datepicker, but nothing I do seems to make it work correctly. Whenever I try adding a datepicker to my function, it throws an error.
import React, { useState } from &...
0
votes
1
answer
494
views
Changing a react-datetime-picker input to not allow past dates
I have 2 DateTimePicker objects on my form, one for start time and one for end time ... At the moment they work perfect, but i am able to choose an end time that is behind the start time ... When i do ...
1
vote
0
answers
410
views
How to make Calendar icon show in React Date Picker?
I'm using React Date Picker, which I installed via npm i react-datepicker. Everything works except the calendar icon which doesn't display. The docs says to add showIcon to the JSX element to display ...
0
votes
1
answer
452
views
How to highlight React date picker days based on the Api response
I have an api that returns the Unix time stamps of more than 50 days in a UseState variable.
const [alldata, setData] = useState(null);
useEffect(() => {
fetch(`/getdates}`)
.then((...
0
votes
0
answers
47
views
React-Datepicker not displaying at all
I'm using React and trying to add a Datepicker, but the component won't display at all—-it has height and width 0x0.
For reference, I'm using
"react": "^18.2.0",
"react-...
0
votes
1
answer
243
views
React Datepicker swap the day and month when user try to enter value manually
In datepicker you want to create dates in DD/MMM/YYYY format. It's okay when I make a selection using the calendar, but when the user tries to enter a value, it changes the day and month.
How do I ...
2
votes
1
answer
2k
views
Is there any way to change the month dropdown on react-datepicker to show number instead of the name itself?
So I have here
<DatePicker
selected={value?.toDate()}
onChange={(date) => this.handleMonthChange(date)}
inline
showMonthYearPicker
dateFormat={this.props.formatString}
/>
I ...
0
votes
1
answer
176
views
style startDate and endDate in react-datepicker
Please your help is needed. I am working on a project which requires me to only style the startDate and endDate.I am using react-datepicker library. the screenshot of what I want to achieve is down ...
1
vote
0
answers
716
views
Include Quarters in Quarter Picker in React Date Picker by Hacker One
`Just like we have the include months in month picker in react date picker by hackerone, how can we include specific quarters?
Link of the date picker package : https://reactdatepicker.com/
If I enter ...
1
vote
0
answers
76
views
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 ...
0
votes
2
answers
2k
views
react-datepicker css selected range
I am implementing: react-datepicker: https://www.npmjs.com/package/react-datepicker
My expected:
But, when I change start-date and end-date, I changed border-radius for start-date and end-date, and ...
3
votes
1
answer
2k
views
How I do keep from updating the state before the end date is chosen in a date range with react-datepicker?
I have a bit of a complicated application where I'm making a chart based on the user input values. They pick a start date, and end date, and another parameter. When that extra parameter is filled, it ...
0
votes
1
answer
27
views
Why ReactdataPicker stiles are not applied in a Wordpress React based plugin?
to be on the save side I added two way:
import 'react-datepicker/dist/react-datepicker.css'
is in the component.
And in Admin.php I have
if ( $this->plugin_screen_hook_suffix == $screen->...
0
votes
1
answer
1k
views
How to set date range maximum 1 year and not more than current date in react-datepicker
How can we set date range maximum 1 year and not more than current date in react-datepicker.
I am using react-datepicker
I try to use maxDate={addYears(new Date(date.start_at), 1)} in end date, It ...
0
votes
1
answer
479
views
build failed using react-datepicker
here is my code, it is a typescript procjet.
import React, { useState } from "react";
import ReactDatePicker from "react-datepicker";
export const DatePicker = () => {
...
0
votes
1
answer
526
views
Could not find a declaration file for module datepicker even if types are installed
i have a provate repo with a uikit which i installed on a nextjs project.
my prod build fails with following error:
Could not find a declaration file for module 'react-datepicker'. '../node_modules/...
0
votes
1
answer
482
views
Disabling typing on mui datepicker
i need to disable manual entering of the dates on my datepicker i used preventdefault but its not working this is my code
<LocalizationProvider dateAdapter={AdapterDayjs}>
...
0
votes
0
answers
920
views
Using MUI-X DatePicker for a product form submission
I am trying to post product data using axios. When I submit my datas entered in the form, I see this error in the console :
AxiosError {message: 'Request failed with status code 400', name: '...