ReactJS - 如何在Material UI中使用带有Firestore的DatePicker？ 时间戳到日期格式

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 时间戳包括一个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组件