如何用ReactJS（MUI）实现指定格式的闹钟时间与日期显示？

你的代码存在两个核心问题导致显示不规范：

• 时间部分：分钟、秒数小于10时未补前导零，出现14:6:56这类格式
• 日期部分：getDay()返回星期索引（0-6）、getMonth()返回月份索引（0-11），直接拼接会显示无意义的数字组合

修正后的基础代码（静态显示） #

import { Box, Typography } from '@mui/material';

const AlarmDisplay = () => {
  const date = new Date();

  // 处理时间：补零确保HH:mm:ss格式
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  const currentTime = `${hours}:${minutes}:${seconds}`;

  // 处理日期：转换为中文可读格式
  const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
  const month = date.getMonth() + 1; // 月份索引+1得到实际月份
  const day = date.getDate();
  const formattedDate = `${weekDays[date.getDay()]} ${month}月${day}日`;

  return (
    <Box>
      <Typography variant="h4">{currentTime}</Typography>
      <Typography variant="body1">{formattedDate}</Typography>
    </Box>
  );
};

export default AlarmDisplay;

实时更新版本（闹钟必备） #

如果需要时间每秒自动刷新，加上useState和setInterval实现实时走时：

import { useState, useEffect } from 'react';
import { Box, Typography } from '@mui/material';

const AlarmClock = () => {
  // 用状态存储当前时间，确保更新时重新渲染
  const [currentDate, setCurrentDate] = useState(new Date());

  useEffect(() => {
    // 每秒更新一次时间
    const timer = setInterval(() => {
      setCurrentDate(new Date());
    }, 1000);
    // 组件卸载时清除定时器
    return () => clearInterval(timer);
  }, []);

  const hours = String(currentDate.getHours()).padStart(2, '0');
  const minutes = String(currentDate.getMinutes()).padStart(2, '0');
  const seconds = String(currentDate.getSeconds()).padStart(2, '0');
  const currentTime = `${hours}:${minutes}:${seconds}`;

  const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
  const month = currentDate.getMonth() + 1;
  const day = currentDate.getDate();
  const formattedDate = `${weekDays[currentDate.getDay()]} ${month}月${day}日`;

  return (
    <Box textAlign="center" mt={4}>
      <Typography variant="h3" fontWeight="bold">{currentTime}</Typography>
      <Typography variant="h6" mt={2}>{formattedDate}</Typography>
    </Box>
  );
};

export default AlarmClock;

关键修改说明 #

1. 时间补零：用String().padStart(2, '0')给单个数字的时、分、秒补前导零，强制两位格式
2. 日期转换：通过数组映射把星期、月份索引转换成可读文本，月份索引需加1对应实际月份
3. 实时更新：利用React状态和定时器，每秒更新日期状态实现动态走时

内容的提问来源于stack exchange，提问作者jrs