如何在React Js中将HH:MM格式时间转换为2023-01-25T19:15:27.615Z格式

下面是几种在React项目中实现从HH:MM格式转换为ISO标准时间（如2023-01-25T19:15:27.615Z）的实用方法：

方法一：原生JavaScript Date对象实现 #

无需额外依赖，直接利用原生Date API完成转换，默认基于当前日期生成ISO时间：

const convertHHMMToISO = (hhmm) => {
  const [hours, minutes] = hhmm.split(':');
  const targetDate = new Date();
  // 设置时分，秒和毫秒归零
  targetDate.setHours(Number(hours), Number(minutes), 0, 0);
  return targetDate.toISOString();
};

// 调用示例
const isoTime = convertHHMMToISO('19:15');
console.log(isoTime); // 输出示例："2024-05-20T19:15:00.000Z"

如果需要基于指定日期生成ISO时间，只需将targetDate替换为目标日期对象即可。

方法二：使用date-fns轻量库 #

date-fns是模块化的日期工具库，体积小且易用：

1. 先安装依赖：

npm install date-fns

2. 实现转换函数：

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

const convertHHMMToISO = (hhmm, baseDate = new Date()) => {
  // 解析HH:mm格式，基于传入的基准日期
  const parsedDate = parse(hhmm, 'HH:mm', baseDate);
  // 格式化为ISO标准字符串
  return format(parsedDate, "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'");
};

// 调用示例
const isoTime = convertHHMMToISO('19:15');
console.log(isoTime); // 输出示例："2024-05-20T19:15:00.000Z"

方法三：使用moment.js库 #

moment.js是老牌日期处理库，API简洁直观：

1. 安装依赖：

npm install moment

2. 实现转换函数：

import moment from 'moment';

const convertHHMMToISO = (hhmm) => {
  return moment(hhmm, 'HH:mm').toISOString();
};

// 调用示例
const isoTime = convertHHMMToISO('19:15');
console.log(isoTime); // 输出示例："2024-05-20T19:15:00.000Z"

注意事项 #

• 输入校验：确保传入的HH:MM格式合法（如08:30而非8:3），可通过正则/^([01]\d|2[0-3]):([0-5]\d)$/提前校验输入。
• 时区处理：上述方法默认生成UTC时区的ISO时间，若需指定时区，可配合date-fns-tz或moment-timezone扩展库处理。

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