如何使用date-fns仅格式化时间？12小时转24小时报错求助

你的代码里直接用new Date(${hour}:${minute} ${meridiem})创建日期对象是问题核心——这种字符串格式的解析没有统一标准，不同浏览器/运行环境可能无法正确识别，会生成无效的Date对象，传给format自然就报错了。

给你两种可靠的实现方式：

方式一：手动转换小时后格式化 #

先根据上午/下午标识把12小时制的小时转成24小时制，再构造时间并格式化：

import { format } from 'date-fns'

interface TwelveHourTime {
  hour: number;
  minute: number;
  meridiem: 'AM' | 'PM';
}

const convertFrom12HourTimeTo24HourTime = (twelveHourTime: TwelveHourTime) => {
  let { hour, minute, meridiem } = twelveHourTime;
  
  // 处理12小时转24小时逻辑
  if (meridiem === 'PM' && hour !== 12) {
    hour += 12;
  }
  if (meridiem === 'AM' && hour === 12) {
    hour = 0;
  }

  // 构造一个有效日期对象（这里用当天日期，不影响时间部分）
  const date = new Date();
  date.setHours(hour, minute, 0, 0);
  
  const formattedTime = format(date, 'HH:mm');
  console.log(formattedTime);
}

方式二：用date-fns的parse函数解析12小时制时间 #

利用date-fns的parse函数，明确指定解析格式，避免环境差异：

import { format, parse } from 'date-fns'

interface TwelveHourTime {
  hour: number;
  minute: number;
  meridiem: 'AM' | 'PM';
}

const convertFrom12HourTimeTo24HourTime = (twelveHourTime: TwelveHourTime) => {
  const { hour, minute, meridiem } = twelveHourTime;
  // 构造符合解析格式的字符串
  const timeStr = `${hour}:${minute} ${meridiem}`;
  // 用parse明确解析12小时制格式
  const parsedDate = parse(timeStr, 'h:mm a', new Date());
  
  const formattedTime = format(parsedDate, 'HH:mm');
  console.log(formattedTime);
}

注意：parse函数的第二个参数是格式字符串，h代表12小时制的小时，a代表上午/下午标识（不管是大写AM/PM还是小写am/pm都兼容）。

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