mrljsh commented 11 months ago

Issue:

Support for Custom Date Formats and Handling ISO Strings in DateInput Component

Issue Description:

The current implementation of the DateInput component lacks proper support for using custom date formats, such as YYYY-MM-DD, in conjunction with the toISOString() method. When attempting to set the react-hook-form value using an ISO string representation of a date (e.g., date.toISOString()), the application crashes due to the component's behavior when reading and formatting the value.

Steps to Reproduce:

Attempt to use the DateInput component with a custom date format, e.g., YYYY-MM-DD.
Set the component's value using an ISO string representation of a date using the date.toISOString() method.
Observe the application crash as the component attempts to read and format the value.

Expected Behavior:

The DateInput component should gracefully handle custom date formats and ISO string representations of dates without causing application crashes. When the value is set using an ISO string, the component should correctly convert the string back to a Date object before proceeding with its internal processing.

For example:

  const { control, handleSubmit, setValue } = useForm({
    defaultValues: {
      date: '',
    },
  })

        <DateInput
          label="Date"
          name="date"
          onChange={(value) => {
            const date = new Date(value).toISOString()
            setValue('date', date)
          }}
          control={control}
        />

Proposed Solution:

To address this issue, it's suggested to enhance the DateInput component's behavior as follows:

When setting the value of the component, check if the provided value is a string. If it is, convert it to a Date object using new Date(value) before proceeding with further processing. This adjustment will allow the component to accept ISO string representations of dates and handle custom date formats more gracefully.

Additional Notes:

Properly handling custom date formats and ISO strings in the DateInput component will improve its usability and prevent crashes that currently occur when attempting to set values using different formats.