ReactJs - 格式化日期和时间答案

【问题标题】：ReactJs - Formatting date and timeReactJs - 格式化日期和时间
【发布时间】：2020-10-20 04:21:18
【问题描述】：

我使用的是在这里找到的 react datepicker：https://www.npmjs.com/package/react-datepicker

我的字段如下所示：

<DatePicker
    selected={this.state.startDate}
    onChange={this.handleChangeDate}
    dateFormat="yyyy-MM-dd"
/>

我的handle 看起来像这样：

handleChangeDate = date => {
    this.setState({
        startDate: date
    });
    console.log('Start Date:' + this.state.startDate)
    this.FormatDate()
};

选择今天的日期，我的控制台在handle给我这个：

Mon Jun 29 2020 15:36:30 GMT-0700 (Pacific Daylight Time)

我在表单中的日期选择器，当保存表单时，由于某种原因它会像这样存储：

2020-06-29T20:46:42Z

如何将startDate 格式化为类似6/29/2020 3:45PM 的格式。我正在尝试使用在这里找到的名为 momentjs 的库：https://momentjs.com/。如果有更好的方法，我不需要使用这个库，但这是我目前所拥有的：

FormatDate() {
    console.log('In moment loop' + this.state.startDate);
    let FormatstartDate = moment(this.state.startDate).format("yyyy-MM-dd");
    console.log('Moment' + FormatstartDate);
}

【问题讨论】：

标签： javascript reactjs typescript date momentjs

【解决方案1】：

从 react-datepicker git 存储库中复制了描述。使用这个最新的 react-datepicker 来替换 momentjs。

回购链接： https://github.com/Hacker0x01/react-datepicker

在 1.8.0 版之前，此软件包使用 Moment.js。从 v2.0.0 开始，我们切换到使用原生 Date 对象的 date-fns 来减小包的大小。如果您要从 1.8.0 切换到 2.0.0 或更高版本，请参阅上面的更新示例，查看示例站点以获取最新示例。

或者您可以直接使用 JavaScript 来执行此操作：

var ts = new Date("2020-06-29T20:46:42Z").toLocaleDateString('en-ca');

您也可以使用 ECMAInternationalAPI 来转换日期时间格式。 How to format a JavaScript date

【讨论】：

感谢您的帮助。