在 React 中將 JavaScript 的 Date 對象格式化為 YYYY-MM-DD hh:mm:ss

為了在 React 中將 JavaScript 的 Date 對象格式化為 YYYY-MM-DD hh:mm:ss,你需要提取年份、月份、日期、小時、分鐘和秒,并適當(dāng)格式化它們。下面是如何實(shí)現(xiàn)這一點(diǎn)的示例:

import React from 'react';

const formatDateTime = (time) => {
  const date = new Date(time);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

const DateTimeComponent = ({ time }) => {
  return (
    <div>
      {formatDateTime(time)}
    </div>
  );
};

// 示例用法
const time = new Date().toISOString(); // 或任何其他有效的日期字符串或時間戳
const App = () => <DateTimeComponent time={time} />;

export default App;

在這個示例中:

formatDateTime 函數(shù):

formatDateTime 函數(shù)接受一個 time 參數(shù)。
它使用提供的 time 創(chuàng)建一個新的 Date 對象。
它從日期對象中提取年份、月份、日期、小時、分鐘和秒。
每個提取的部分都使用 padStart(2, '0') 進(jìn)行格式化,以確保始終是兩位數(shù)。
它返回 YYYY-MM-DD hh:mm:ss 格式的字符串。
DateTimeComponent 組件:

DateTimeComponent 是一個 React 函數(shù)組件,接收 time 作為屬性。
它使用 formatDateTime 函數(shù)格式化提供的 time,并在 div 中顯示它。
App 組件:

App 組件用于演示 DateTimeComponent 的用法,并以當(dāng)前時間戳作為示例。
這種方法確保日期和時間始終以 YYYY-MM-DD hh:mm:ss 格式顯示。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容