在 React 中更改 DatePicker 的日期格式

Question

I am just trying to display a date from the DatePicker component in React but it displays it as an Object:

startDateOwner: Mon Feb 08 2021 00:00:00 GMT+0100 (Central European Standard Time)

How could I display it as 08/02/2021 and as a string?

Here is the code I am using:

 const Calendar = ({ startDate, endDate, handleChangeDates }) => ( <div> <label> Beginning date <DatePicker name = "startDate" selected={startDate} selectsStart startDate={startDate} endDate={endDate} onChange={(date)=>handleChangeDates(date, "startDate")} /> </label> <label> End date <DatePicker name = "endDate" selected={endDate} selectsEnd startDate={startDate} endDate={endDate} minDate={startDate} onChange={(date)=>handleChangeDates(date, "endDate")} /> </label> </div>

Thank you ! Julie

Answer 1

React date picker provides a attribute dateFormat

<DatePicker 
      name = "startDate"
      selected={startDate}
      selectsStart
      startDate={startDate}
      endDate={endDate}
      onChange={(date)=>handleChangeDates(formatDateFn(date), "startDate")}
      dateFormat="dd/MM/YYYY"  (Use dd/MM/yyyy  if you get error in console)
    />


const formatDateFn = (date) => {
     const selectedDate = new Date(date)
     return selectedDate.getDate() + "/"+ parseInt(selectedDate.getMonth()+1) +"/"+ selectedDate.getFullYear();

} 

You are welcome! Subodh

Answer 2

If you're objective is to just display the date in (dd/mm/yyyy) format, you may use moment

moment(date_variable).format("DD/MM/YYYY")

This would work to display date.