如何在React中用Moment.js计算日期间隔并按小时/分钟格式化

你当前用diff指定'hours'时，Moment.js默认会取整返回整数，所以没法得到带小数的小时数，也没法区分显示分钟格式。要实现需求，得先计算精确的总分钟差，再根据时长范围选择格式化方式：

解决代码示例 #

import Moment from 'moment';

// 封装时长格式化函数
const formatDuration = (startTime, endTime) => {
  // 计算精确的总分钟差，第三个参数true返回浮点数
  const totalMinutes = Moment(endTime).diff(Moment(startTime), 'minutes', true);
  
  if (totalMinutes >= 60) {
    // 转换为小时，保留1位小数
    const hours = (totalMinutes / 60).toFixed(1);
    return `${hours}hrs`;
  } else {
    // 小于1小时，显示整数分钟数
    return `${Math.round(totalMinutes)}mins`;
  }
};

const Shows = ({ shows }) => {
  return (
    <>
      {shows.map((show, index) => (
        <p key={index}>{formatDuration(show.start_time, show.end_time)}</p>
      ))}
    </>
  );
};

关键说明 #

• diff方法的第三个参数设为true是核心，它会返回精确的差值（而非取整后的整数），比如150分钟会直接返回150，而非被取整的2小时
• 当总时长≥60分钟时，转换为小时并保留1位小数，确保像2.5hrs这样的格式能正确输出
• 时长<60分钟时，直接取整显示分钟数，比如30分钟输出30mins
• 注意给map的元素加上key属性，符合React的渲染要求

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