UTC格式时间及其dayjs相关封装

• 2024-09-03T16:00:00.000Z这种格式是UTC格式
• 北京时间比UTC格式时间快8小时
• 国际化的Web APP需要用户设置地区，以此来正确显示自己地区的位置时间

使用dayjs库

国际化

• 首先需要引入静态资源：https://github.com/wztlink1013/lyrics/blob/5cd479b933dbfed4b4ca1ce682fa6219a8db5b94/apps/lyrics-client/src/locales/i18n.ts#L6
• 跟随Web应用进行国际化切换：https://day.js.org/docs/zh-CN/i18n/loading-into-nodejs

默认UTC+使用地区插件展示

• https://github.com/wztlink1013/lyrics/blob/5cd479b933dbfed4b4ca1ce682fa6219a8db5b94/apps/lyrics-client/src/locales/i18n.ts#L18

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

dayjs.extend(utc);
dayjs.extend(timezone);

这两行代码是使用 dayjs 这个日期处理库时的扩展功能。

1. dayjs.extend(utc);：

• 这一行代码引入了 dayjs 的 utc 插件，使得 dayjs 能够支持 UTC 时间的处理。通过这个插件，可以方便地进行 UTC 时间和本地时间之间的转换。

2. dayjs.extend(timezone);：

• 这一行代码引入了 dayjs 的 timezone 插件，它允许在不同的时区之间进行时间转换。这个插件可以根据指定的时区处理时间，使得显示和计算更加灵活。

总的来说，这两行代码的目的是增强 dayjs 库，使其能够处理 UTC 和不同的时区，从而更好地支持国际化和跨时区的时间管理。

格式化UTC字符串为指定地区指定格式

其中'Asia/Shanghai'应该设置为一个配置

• https://github.com/wztlink1013/lyrics/blob/5cd479b933dbfed4b4ca1ce682fa6219a8db5b94/apps/lyrics-client/src/components/Doc/EditorView.tsx#L517

dayjs
  .utc(updatedAtStr)
  .tz('Asia/Shanghai')
  .format('YYYY-MM-DD HH:mm:ss')

封装

import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import weekOfYear from 'dayjs/plugin/weekOfYear';

// timezone
dayjs.extend(utc);
dayjs.extend(timezone);
// first and last
dayjs.extend(isSameOrAfter);
dayjs.extend(isSameOrBefore);
dayjs.extend(customParseFormat);
dayjs.extend(weekOfYear);

const TIMEZONE = 'Asia/Shanghai';

/**
 * get date string with UTC datasource and assign timezone
 * @param str UTC time string
 * @param template dayjs format string
 * @param option other params
 * @param option.timezone assign timezone
 * @returns format string
 */
const getFormatTime = (
  str: string,
  template = '',
  option?: {
    timezone?: string;
  }
) => {
  return dayjs(str)
    .utc()
    .tz(option?.timezone || TIMEZONE)
    .format(template);
};

enum TimeBoundaryType {
  MONTH = 'month',
  WEEK = 'week',
}
type TimeWeekStart = 1 | 2 | 3 | 4 | 5 | 6 | 7;
/**
 * get date string's month boundary
 * @param str time string
 * @param isStart true -> month first day; false -> month last day;
 * @param option other params
 * @param option.showHMS show h m s
 * @param option.weekStart when boundaryType is week, week first day
 * @returns format string
 */
const getTimeMonthBoundary = (
  str: string,
  isStart = true,
  option?: {
    showHMS?: boolean;
    boundaryType?: TimeBoundaryType;
    weekStart?: TimeWeekStart;
  }
) => {
  return `${dayjs(str)
    [isStart ? 'startOf' : 'endOf'](option?.boundaryType || 'month')
    .add(
      option?.boundaryType === 'week' && option?.weekStart
        ? option.weekStart
        : 0,
      'day'
    )
    .format('YYYY-MM-DD')}${
    option?.showHMS ? (isStart ? ' 00:00:00' : ' 23:59:59') : ''
  }`;
};

const dateStr = '2024-09-30T00:22:25.218Z';
const formatDateStr = getFormatTime(dateStr, 'YYYY-MM-DD HH:mm:ss');

const mStart = getTimeMonthBoundary(formatDateStr, true, {
  showHMS: true,
  boundaryType: TimeBoundaryType.WEEK,
  weekStart: 1,
});
const mEnd = getTimeMonthBoundary(formatDateStr, false, {
  showHMS: true,
  boundaryType: TimeBoundaryType.WEEK,
  weekStart: 1,
});

console.info('[info]', { dateStr, formatDateStr, mStart, mEnd });