Change Selected Date Value format in React-Datepicker?

Question

Using react-datepicker in a ReactJS app:

<DatePicker

                                    selected={task.dueDate}
                                    onChange={date => handleInputChange({
                                        target: {
                                            value: date,
                                            name: 'dueDate'
                                        }
                                    })}
                                    name="dueDate"
                                    dateFormat="MM/dd/yyyy"
                                    popperPlacement="top-start"
                                />

It all works fine EXCEPT the exported value only comes in yyyy-MM-dd format with Z time. I want the date in MM/dd/yyyy like seen in the dateFormat attribute above. This attribute works for displaying the date in Datepicker in the app, but the actual date value sent to my backend continues to be in yyyy-MM-dd:etc... Any ideas?

Answer 1

To ensure that the date sent to the backend is in the MM/dd/yyyy format, you should format the date using the toLocaleDateString method before sending.

Here is the updated code:

<DatePicker
  selected={task.dueDate}
  onChange={(date) => {
    const formattedDate = date.toLocaleDateString('en-US', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
    });

    handleInputChange({
      target: {
        value: formattedDate,
        name: 'dueDate',
      },
    });
  }}
  name="dueDate"
  dateFormat="MM/dd/yyyy"
  popperPlacement="top-start"
/>

This modification utilizes toLocaleDateString to format the date as MM/dd/yyyy before passing it to handleInputChange function. Adjust the format and locale options based on your requirements.