在 React 中将 JavaScript 的 Date 对象格式化为 YYYY-MM-DD hh:mm:ss

为了在 React 中将 JavaScript 的 Date 对象格式化为 YYYY-MM-DD hh:mm:ss,你需要提取年份、月份、日期、小时、分钟和秒,并适当格式化它们。下面是如何实现这一点的示例:

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 函数:

formatDateTime 函数接受一个 time 参数。
它使用提供的 time 创建一个新的 Date 对象。
它从日期对象中提取年份、月份、日期、小时、分钟和秒。
每个提取的部分都使用 padStart(2, '0') 进行格式化,以确保始终是两位数。
它返回 YYYY-MM-DD hh:mm:ss 格式的字符串。
DateTimeComponent 组件:

DateTimeComponent 是一个 React 函数组件,接收 time 作为属性。
它使用 formatDateTime 函数格式化提供的 time,并在 div 中显示它。
App 组件:

App 组件用于演示 DateTimeComponent 的用法,并以当前时间戳作为示例。
这种方法确保日期和时间始终以 YYYY-MM-DD hh:mm:ss 格式显示。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容