如何将从 <input type="datetime-local"> 收到的值转换为 firestore 格式？答案

【问题标题】：How can I convert the value received from <input type="datetime-local"> to firestore format?如何将从 <input type="datetime-local"> 收到的值转换为 firestore 格式？
【发布时间】：2018-08-25 06:07:37
【问题描述】：

在 react webapp 中，我有一个带有 <input type="datetime-local"> 的表单。

在 Windows 上的 chrome 版本 64 中返回的值格式如下：

2018-03-08T07:00

我认为在其他浏览器中会有所不同。

我想在 firestore 中写入这个值，格式与我创建时生成的格式相同，使用 firestore 管理 GUI，类型为“timestamp”的字段，如下所示：

March 8, 2018 at 7:00:00 AM UTC+2

知道如何执行此操作以使其适用于所有浏览器吗？

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/HTML/Element/input/…: “由于浏览器对本地日期时间的支持有限，以及输入工作方式的变化，目前最好使用框架或库来呈现这些，或者使用您自己的自定义输入。”
可能应该使用单独的日期和时间字段...谢谢

标签： javascript html reactjs firebase google-cloud-firestore

【解决方案1】：

要格式化日期，你应该使用这个：

this.state={
    datetime: `${new Date().getFullYear()}-${`${new Date().getMonth()+1}`.padStart(2,0)}-${`${new Date().getDate()}`.padStart(2,0)}T${`${new Date().getHours()}`.padStart(2,0)}:${`${new Date().getMinutes()}`.padStart(2, 0)}`
}

注意：从 Josh 的回答中，我将 getDay() 更改为 getDate()，因为第一个返回星期几 (0 -6)，我没有足够的声誉来评论它

【讨论】：

【解决方案2】：

我在状态中设置了一个默认/初始值：

this.state={
    datetime: `${new Date().getFullYear()}-${`${new Date().getMonth()+1}`.padStart(2,0)}-${`${new Date().getDay() + 1}`.padStart(2,0)}T${`${new Date().getHours()}`.padStart(2,0)}:${`${new Date().getMinutes()}`.padStart(2, 0)}`
}

然后我创建一个使用上述状态值的受控输入...

 <input 
   type="datetime-local" 
   name="datetime" 
   value={this.state.datetime} 
   onChange={e => this.setState({datetime: e.target.value})}
  />

有点冗长，但对我有用。

【讨论】：

谢谢。实际上我只完成了 new Date(value)，其中 value 是我从 datetime-local 得到的。一开始我只做了 Date(value) ，但没有用。
我认为您的问题是特定于日期时间的。我的解决方案不起作用吗？如果是这样，您遇到了什么错误，它对我有用。我想我的解决方案更具体地是将默认/初始值设置为当前时间，我一直在努力弄清楚，所以我只是手动重建了时间戳的形状。
没有尝试，因为获取我从 datetime-local 收到的值并使用 New Date() 足以满足我的需要。但是，无论如何，谢谢...（我将答案标记为有用:)
如果它回答了您的问题或回答您自己的问题，请您接受答案。重点是通过将此作为有用的参考点来帮助每个人，而不仅仅是回答个别问题。
我认为这不应该是公认的答案，因为我的问题可能没有好的答案（请参阅我的问题的第一条评论）。我认为仅使用 new Date() 与您的答案一样好... :) 我将您的答案标记为有用-我认为这是正确的做法:)

【解决方案3】：

Cloud Firestore 以 ISO8601 格式存储时间戳。如果使用控制台添加时间戳，然后get文档，返回如下。

{"timestamp":"2018-03-16T15:45:36.000Z"}

我建议您将所有时间转换为通用格式，这样您的数据库中就没有不同的时间格式。一个很好的工具是moment.js。我会推荐ISO8601 格式，因为大多数（如果不是全部）浏览器、应用程序、数据库等都可以读取它。

【讨论】：

谢谢，我知道片刻，但你没有回答我的问题......也许它没有一个好的答案，我应该使用单独的日期和时间输入，作为对我的问题的评论建议。
我已经更新了我的答案，应该会更清楚