React中如何使用DayJS将日期字符串转换为时分秒格式

完全可以用DayJS改写，且改写后代码可读性、跨浏览器一致性更好。

注意：你提供的原函数存在时区逻辑不一致的问题：小时取的是UTC时区值，分钟、秒取的是本地时区值，以下改写版本会100%对齐原有逻辑，不会改动原函数的返回行为。

改写步骤 #

• 首先引入DayJS和处理UTC时间所需的utc插件，DayJS默认不内置UTC能力，需要手动注册插件
• 用dayjs()替换原生new Date()解析入参的日期字符串
• 调用对应API取时、分、秒值拼接即可，方法和原生Date的命名基本一致，学习成本极低

对齐原逻辑的完整代码 #

import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';

// 注册UTC插件
dayjs.extend(utc);

const formatHours = (dateStr: string) => {
  const dateIns = dayjs(dateStr);
  // 完全对齐原逻辑：UTC小时 + 本地时区分钟 + 本地时区秒
  return `${dateIns.utc().hour()}:${dateIns.minute()}:${dateIns.second()}`;
};

补充说明 #

• 如果你写原函数时是手滑漏写了分、秒的UTC获取（即预期返回全UTC时区的时分秒），可以用下面的版本，逻辑更统一：

const formatHours = (dateStr: string) => {
  const utcIns = dayjs(dateStr).utc();
  return `${utcIns.hour()}:${utcIns.minute()}:${utcIns.second()}`;
};

• 如果需要返回值自动补零（比如03:05:09而非原生逻辑的3:5:9），可以直接用DayJS内置的格式化方法，不需要手动拼接：

  // 全UTC时间、24小时制、不补零
  const formatHours = (dateStr: string) => dayjs(dateStr).utc().format('H:m:s');
  // 需要补零的话把占位符换成大写即可：HH:mm:ss
  

• DayJS的体积只有2KB左右，比引入其他重量级日期库的成本低很多，兼容所有原生Date支持的日期字符串格式，如果需要解析自定义格式的日期串，可以搭配customParseFormat插件使用。

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