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

Posted 2023-02-23

【中文标题】如何在 React 中使用 map 函数使用日期类型？

【英文标题】：How can I use date type using map function in React?

【发布时间】：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>

【参考方案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