从 API 中提取的格式日期 - React答案

【问题标题】：Format date pulled from API - React从 API 中提取的格式日期 - React
【发布时间】：2019-10-14 16:11:05
【问题描述】：

我目前正在使用 componentDidMount 在我的网页上显示 API 数据。大多数数据是日期，即“到期日”“_field”，它们显示为 MM/dd/yyyy HH:mm，但是我想在我的网页上将日期重新格式化为 MM/dd/yyyy。不知道从哪里开始，我熟悉 var date = new Date() 但不确定在这种情况下是否要使用它

        render() {
        var {items} = this.state
        return (
        ....
        <tbody>

        {items.map(item => ( 

            <tr key={item.summary_type}>

            <td> {item.summary_type} </td>
            <td> {item.supplier_status} </td>
            <td> {item.due_date} </td>
            <td> {item.iso_field} </td>
            <td> {item.as_field} </td>
            <td> {item.nadcap_field} </td>
            <td> {item.cert_field} </td>
            <td> {item.extension_field} </td>

            </tr>
            ))}
            </tbody>
            ....

【问题讨论】：

标签： reactjs datetime

【解决方案1】：

您可以创建一个函数来返回您需要的日期的第一部分：

   getDate = (date) => {
     return date.split(' ')[0]
    }

    render() {
    var {items} = this.state
    return (
    ....
    <tbody>

    {items.map(item => ( 

        <tr key={item.summary_type}>

        <td> {item.summary_type} </td>
        <td> {item.supplier_status} </td>
        <td> {this.getDate(item.due_date)} </td>
        <td> {item.iso_field} </td>
        <td> {item.as_field} </td>
        <td> {item.nadcap_field} </td>
        <td> {item.cert_field} </td>
        <td> {item.extension_field} </td>

        </tr>
        ))}
        </tbody>
        ....

【讨论】：

谢谢！我使用“return date.split(' ', 1)”来执行相同的功能，如果我理解正确，我将其拆分一次并仅输出 mm/dd/yyyy？在您的示例中，“[0]”是否意味着拆分过去的索引 0？
是的 date.split(' ', 1) 这也是另一个很好的解决方案，在这种情况下，拆分方法创建了一个包含两个元素的数组，[MM/dd/yyyy, HH:mm] 和 [0]我们是说我们只想要第一个位置的元素

【解决方案2】：

我不确定确切的输入或输出，但您可以使用Date.toLocaleDateString 来获取所需的日期字符串。

const now = new Date();
const dateString = now.toLocaleDateString({
  weekday: "short",
  year: "numeric",
  month: "2-digit",
  day: "numeric"
})

console.log(dateString);

【讨论】：