ReactJS中如何修改日期格式输出为17-Jun-2022格式

你当前使用的new Date().toDateString()是JavaScript内置的默认日期格式化方法，固定输出星期 月份 日 年结构的字符串，无法直接生成17-Jun-2022格式的结果，需要手动拆分日期字段做格式化，同时要修复原代码中定时器未清除、重复注册的问题。

调整后完整代码 #

import { useEffect, useState } from 'react';

function DateComponent() {
  const [openingdate, setOpeningdate] = useState('');

  useEffect(() => {
    // 英文月份缩写映射表
    const monthAbbr = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    
    // 自定义日期格式化方法
    const getFormatDate = () => {
      const current = new Date();
      const day = String(current.getDate()).padStart(2, '0');
      const month = monthAbbr[current.getMonth()];
      const year = current.getFullYear();
      return `${day}-${month}-${year}`;
    };

    // 首屏直接赋值，避免初始1秒空值
    setOpeningdate(getFormatDate());
    // 保存定时器ID用于后续清除
    const timer = setInterval(() => {
      setOpeningdate(getFormatDate());
    }, 1000);

    // 组件卸载时清除定时器，避免内存泄漏
    return () => clearInterval(timer);
  }, []); // 空依赖数组，保证定时器只在组件挂载时注册一次

  return <div>{openingdate}</div>
}

关键调整说明 #

• 弃用默认toDateString()方法，手动拆分日期字段拼接目标格式：
  • 用getDate()获取日期，通过padStart(2, '0')补前导零，保证个位数日期显示为两位（如3号显示为03）
  • 用getMonth()获取月份索引（JS中月份返回值为0-11，对应1-12月），通过提前定义的月份缩写数组映射出Jan、Jun这类英文缩写
  • 用getFullYear()获取四位完整年份
• 给useEffect添加空依赖数组，避免组件每次重渲染都新建定时器，造成性能问题
• 在useEffect的返回回调中清除定时器，组件卸载时停止计时，避免内存泄漏
• 组件挂载时先执行一次格式化赋值，避免首屏加载的1秒内日期区域显示为空

内容的提问来源于stack exchange，提问作者Jadhav Malhari Arvind