如何在 React 中使用 map function 来使用日期类型？

Question

我刚刚开始学习 React。

我正在使用 map function 来使用数据。

这是我的代码。

{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}？

Answer 1

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

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

您也可以为此使用 package moment ，它提供了更多格式，但库非常重。

Answer 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

Answer 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>

Answer 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