ReactJS - 如何将 Material UI 中的 DatePicker 与 Firestore 一起使用？时间戳到日期格式

Question

日期在数据库中记录正常，但是当我显示时，DatePicker 不会从数据库中重新配置日期，因为它带有时间戳（秒和纳秒）。

  <DatePicker
    margin="normal"
    label="Data do pedido"
    fullWidth
    value={
     form.datapedido   
    }
    onChange={handleChangeData}
      variant="filled"
      style={{ marginTop: 0 }}
  />

如果我将 DatePicker 的值更改为将 Timestamp 设置为 Date，那么我将无法保存日期，因为代码会尝试将 Date 更改为 Date。

如果我以这种方式离开，那么我可以保存日期，但是当我从 firestore 加载日期时，我会从 DatePicker 得到“无效日期”

Answer 1

Firestore timestamp包含一个 toDate 方法，您可以使用该方法将日期转换为 javascript Date 对象， 假设您的组件需要一个 Date 对象。

所以，假设 form.datapedido 是一个 Timestamp 对象：

<DatePicker
    margin="normal"
    label="Data do pedido"
    fullWidth
    value={
     form.datapedido.toDate()
    }
    onChange={handleChangeData}
      variant="filled"
      style={{ marginTop: 0 }}
  />

当您想要更新您的选择器时（在加载初始值之后），您可能会发现一个挑战。

这很有用：

const formatDate = (date) => isNil(date.seconds)
   ? date // Already a javascript date object
   : date.toDate()

<DatePicker
    margin="normal"
    label="Data do pedido"
    fullWidth
    value={
     formatDate(form.datapedido)
    }
    onChange={handleChangeData}
      variant="filled"
      style={{ marginTop: 0 }}
  />

这可能会起作用或给你一个起点，我不熟悉 DatePicker 组件