首页 > 解决方案 > 从 react-datetime 解析日期/时间值

问题描述

我正在使用react-datetime向用户呈现日历以进行日期/时间选择。如何获取存储在状态中的解析值并将其转换为可读日期,以便我可以在 UI 的其他位置呈现它。

我发送date了一个帖子请求,值看起来像:2018-10-26T18:15:47.608Z。当我尝试在表格中呈现那个时间时,它会被剥离到这个值1540577747608。我现在想显示祖鲁时间。

      this.state = {
         date: new Date()
      }

      dateChange = date => this.setState({ date });

      render() {
      return (
            <div>
              <label>Choose a start date/time:</label>
              <Datetime
                onChange={this.dateChange}
                value={this.state.date}
                input={false}
                isValidDate={validDate}
                open={true}
                utc={false}
                onClickDay={value => alert("day" + value + "clicked")}
              />
            </div>
          </div>

在我要呈现日期的另一个组件中,该值是从 api 调用中检索并存储的 formatDate: response.data.data.date

然后,我在表格中渲染:<td key={schedule.formatDate}>{schedule.formatDate}</td>

标签: javascriptreactjsmomentjs

解决方案


Date没有简单的时间格式化方法。
如果您想显示 UTC 时间 - 或 zulu 时间 - 您必须使用专用方法来访问小时、分钟和秒并手动设置它们的格式。
例如,以下显示 UTC 小时和分钟:

`${event.getUTCHours()}h${event.getUTCMinutes()}`

推荐阅读