更改 React-Datepicker 中选定的日期值格式？

Question

在ReactJS应用程序中使用react-datepicker：

<DatePicker

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

一切正常，除了导出的值仅采用 yyyy-MM-dd 格式和 Z 时间。我想要 MM/dd/yyyy 格式的日期，如上面的 dateFormat 属性中所示。此属性适用于在应用程序中的 Datepicker 中显示日期，但发送到我的后端的实际日期值仍然是 yyyy-MM-dd:etc...有什么想法吗？

Answer 1

为确保发送到后端的日期为MM/dd/yyyy格式，请在发送前使用

toLocaleDateString

方法格式化日期。

这是更新后的代码：

<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"
/>

此修改使用

toLocaleDateString

将日期格式化为 MM/dd/yyyy，然后再将其传递给

handleInputChange

函数。根据您的要求调整格式和区域设置选项。