如何将普通字符串（如5pm）转换为2022-04-20T17:00:00.000Z格式？

没问题，这个需求我在项目里碰到过好多次，不管是前端直接处理还是后端提前转换，都有可行的办法，下面给你详细拆解：

一、前端原生JavaScript处理（无依赖） #

如果你不想引入第三方库，纯原生JS就能搞定核心逻辑：先解析5pm这类12小时制字符串，转成24小时制的小时数，再构造Date对象生成ISO格式字符串。

function convertToISOTime(timeStr) {
  // 匹配12小时制时间，支持纯小时（如5pm）或带分钟（如5:30pm）
  const timeMatch = timeStr.match(/(\d+):?(\d+)?(am|pm)/i);
  if (!timeMatch) throw new Error('时间格式不合法，请检查输入');

  let hour = parseInt(timeMatch[1], 10);
  const minute = timeMatch[2] ? parseInt(timeMatch[2], 10) : 0;
  const period = timeMatch[3].toLowerCase();

  // 转换为24小时制
  if (period === 'pm' && hour !== 12) hour += 12;
  if (period === 'am' && hour === 12) hour = 0;

  // 构造日期对象（这里用当前日期，你也可以指定固定日期比如new Date('2022-04-20')）
  const targetDate = new Date();
  targetDate.setHours(hour, minute, 0, 0); // 秒和毫秒设为0，符合示例格式

  return targetDate.toISOString();
}

// 测试用例
console.log(convertToISOTime('5pm')); // 输出类似 "2024-05-20T17:00:00.000Z"
console.log(convertToISOTime('9:15am')); // 输出类似 "2024-05-20T09:15:00.000Z"

注意事项： #

• 正则表达式可以根据你实际的时间格式调整，比如如果支持24小时制（如17:00），可以扩展匹配规则；
• 如果你的业务不需要具体日期，用当前日期完全没问题，Antd TimePicker会自动忽略日期部分只展示时间。

二、前端使用Day.js（推荐，更灵活） #

如果需要支持更多复杂时间格式，或者不想自己写正则处理边界情况，用Day.js（轻量版Moment）会更省心：

1. 先安装依赖：

npm install dayjs

2. 编写转换函数：

import dayjs from 'dayjs';
import advancedFormat from 'dayjs/plugin/advancedFormat';

// 加载扩展插件，支持12小时制解析
dayjs.extend(advancedFormat);

function convertToISOTime(timeStr) {
  // 支持多种时间格式：hA（如5pm）、h:mmA（如5:30pm）、HH:mm（如17:00）
  const parsedTime = dayjs(timeStr, ['hA', 'h:mmA', 'HH:mm']);
  if (!parsedTime.isValid()) throw new Error('时间格式不合法');

  // 转成Date对象后生成ISO字符串
  return parsedTime.toDate().toISOString();
}

额外优势： #

• Day.js支持直接将解析后的时间对象传入Antd TimePicker，不用转成ISO字符串：

// React组件中使用
import { TimePicker } from 'antd';

function MyComponent() {
  const timeValue = dayjs('5pm', 'hA');
  return <TimePicker value={timeValue} />;
}

（注：Antd v4需要配置Day.js为时间库，v5默认支持Day.js）

三、后端提前转换（减少前端工作量） #

如果多个前端页面都需要处理这类时间格式，建议在后端直接转换好再返回给前端。以Node.js为例，同样可以用Day.js或者原生Date完成转换，逻辑和前端类似：

// Node.js后端示例
const dayjs = require('dayjs');
require('dayjs/plugin/advancedFormat');
dayjs.extend(advancedFormat);

// 从数据库取出"5pm"后转换
const dbTimeStr = '5pm';
const isoTimeStr = dayjs(dbTimeStr, 'hA').toDate().toISOString();

// 将isoTimeStr返回给前端

这样前端拿到的直接就是Antd TimePicker支持的格式，不用再做处理。

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