如何在ReactJS中将数据yyyy-mm-dd转换为dd/mm/yyyy？

Question

我是 ReactJS 的初学者，我正在尝试保存一些日期字段。

默认情况下，日期以 format 保存yyyy-MM-dd，但当我能够发送 API 的日期时，格式应为 format dd/mm/yyyy。

我已经尝试使用.toLocaleDateString('pt-BR', {timeZone: 'UTC'});. 但是当我这样做时，返回错误：

The specified value "19/8/2020" does not conform to the required format, "yyyy-MM-dd".

这是我放入CodeSandBox中的代码

并且，在这里我获取日期值：

import React, { useState } from "react";

const NewUser = () => {
  const [data, setData] = useState({
    birthdate: "",
    admission_date: ""
  });

  const changeField = (field, value) => {
    const auxData = { ...data };
    auxData[field] = value;
    setData(auxData);
  };

  return (
    <div>
      <span>Born</span>
      <input
        id="birthdate"
        type="date"
        value={data.birthdate}
        onChange={(event) => changeField("birthdate", event.target.value)}
      />
      <div />
      <span>Admission Date</span>
      <input
        id="admission_date"
        type="date"
        value={data.admission_date}
        onChange={(event) => changeField("admission_date", event.target.value)}
      />
    </div>
  );
};

export default NewUser;

Answer 1

不要仅仅为了这个简单的任务而导入整个 momentjs 库。

// yyyy-MM-dd
const input = "2020-08-19"
const [year, month, day] =  input.split('-')

// dd/mm/yyyy
console.log(`${day}/${month}/${year}`)

编辑：使用Intl.DateTimeFormat

// yyyy-MM-dd
const input = "2020-08-19"
const date = new Date(input)

// output depends on user's language and locale
console.log(new Intl.DateTimeFormat().format(date));

另外，请查看You-Dont-Need-Momentjs以获取一些更轻的替代方案，甚至一些用于处理日期的常见用例的本机方法。

另外，您可能需要等到准备好将数据发送到服务器后再应用转换（而不是尝试在内部执行此操作changeField）。例子：