从API提取格式日期-React

时间:2019-10-14 16:11:05

标签: reactjs datetime

我当前正在使用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>
            ....

2 个答案:

答案 0 :(得分:1)

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

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

console.log(dateString);

答案 1 :(得分: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>
        ....