如何在 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