react-datepicker | easily internationalizable , accessible , mobile-friendly | Datepicker library

I'm making a registration form with required birthday field using react-datepicker and react-hook-form. After clicking onSubmit button, all data are logged in the console except birthDate (which is null). How do I get the date value from react-datepicker to register of the react-hook-form?

RegistrationForm interface

I am working on this project and we were required to translate all files created from React Javascript to React Typescript, but being a begginer on type annotations, I have had some struggles, especially with 3rd party packages and libs.

I am using ReactDatePicker to get the user inputted date (written or selected) and moment lib to parse it, together with formik in a multi step form, so users can see, edit and create all in one component. In the latest file I have tampered with, typescript complains that the 'string' value I am working with cannot be assigned to 'Date', although I am typing it as Date | string on its interface as I code it.

This is the interface, which is in an external file:

The error it says is:

ReferenceError setHours is not defined

These are the codes. Also, how can I use the onChange value for the react-datePicker? Thank you.

I'm facing this error after integrating react-datepicker in my Next.js app. Couldn't be able to fix.

Below some code of my app files:

package.json

I have a component which uses the react-datepicker package.

I am writing to write a unit test which will edits the dates and thereafter run some logic. However, i am unable to detect the field which for me to change using userEvent.type(). I have tried to use getByText, getByRole, getAllByText.

Form.tsx

I develop DatePicker for components library, and using the react-datepicker npm to do so.

The desired behavior is that the user click the input, the date picker will open, the user will select 2 dates, when click on the 2nd date the DatePicker will close.

The issue is that the picker is being closed on the start date selection.

I removed all my code, and use the exact example displayed in the npm demo:

https://reactdatepicker.com/#example-date-range-using-input-with-clear-button

still the date picker is closing on the start date select.

I tried adding shouldCloseOnSelect set to true but then it doesn't close on end date select as well.

how to prevent the closing on the start date, and allow it on the end date.

current code:

I'm using React-Datepicker inside a Formik form validated with Yup. To integrate React-Datepicker inside Formik I used the wrapper solution in this thread.

When a value is initially entered, .required() gets checked, but any other validation does not get checked. So I'm not getting my StartDate later than today validation right away. These other validations do get triggered if I re-enter the control a second time and exit it. So the only initial validation error that happens immediately is .required(), but for any other errors I need to re-touch the control. Are there any solutions to this?

EDIT: I noticed that Formik's .touched does not get set on the 1st DatePicker input. It only gets set on subsequent touches/inputs.

Yup

When my component is rendered a warning is showing in my console that is caused by the value changing from a defined to undefined value. I have set the value attribute in the form tag to their respective state but still getting the error. Please check the useEffect too.

Why is my onclick() remove method not working in this react component? I checked the DELETE api call using postman and it works fine. The interface is also displayed correctly with all the information. Its just that when I click the delete button nothing happens, but it should have triggered the async remove method to invoke the DELETE api call.