如何在 React 中使用 map 函数使用日期类型？答案

【问题标题】：How can I use date type using map function in React?如何在 React 中使用 map 函数使用日期类型？
【发布时间】：2021-10-17 17:28:09
【问题描述】：

我刚刚开始学习 React。

我正在使用地图功能来使用数据。

这是我的代码。

{dailynoteList.map((val) => {
      return (
        <div key={val.index} className="dailybox">


          //<div className="valSubject"> 
            //<div className="subjectText">{val.subject}</div>  
          //</div>

          <div className="contentDate">
            <div className="valDate">{val.date}</div>
          </div>
        </div> 
      )
    })}

而“{val.date}”的结果是这样的。

我只想使用月份和日期，例如“8/8”或“8 月 8 日”。

如何使用 {val.date}？

【问题讨论】：

解析日期。 {new Date(val.date)}，然后你可以随意格式化它。简单示例：<div className="valDate">{new Date(val.date).toDateString()}</div>

标签： javascript node.js reactjs indexing map-function

【解决方案1】：

只需使用Date 构造函数和toDateString 方法对其进行格式化。

<div className="valDate">{new Date(val.date).toDateString()}</div>

你也可以使用 moment 这个包，它提供了更多的格式，但是这个库很重。

【讨论】：

【解决方案2】：

您可以使用dayjs 来格式化日期。

{dayjs(val.date).format("M/D")} // return 8/8

{dayjs(val.date).format("MM/DD")} // return 08/08

{dayjs(val.date).format("MMMM D")} // return August 8

【讨论】：

【解决方案3】：

安装

npm install moment --save

导入到你的组件

import moment from 'moment'

改变

<div className="valDate">{new Date(val.date).toDateString()}</div>

到

<div className="valDate">{moment(val.date).format('LL')}</div>

【讨论】：

不推荐使用 moment 了。
你应该改用dayjs
@Shyam 好的，谢谢。
@VũHuyHoàng 好的，谢谢。

【解决方案4】：

这不是正确的问题，应该是 How to get year/month/day from a date object?

无论如何，仅适用于 JS 你可以

new Date(val.date).toLocaleDateString()
// thats will return "8/8/2021"

// or you can

new Date(val.date).toLocaleDateString().slice(0,3)
// thats will return 8/8

我建议你玩一下 Date 构造函数，并阅读它 JavaScript Date objects

【讨论】：