dayjs时间转换,模糊时间、精确时间

前言

  1. 关于dayjs:
    https://dayjs.fenxianglu.cn/category/#typescript
  2. 关于模糊时间、精确时间

 


模糊时间、精确时间


 


模糊时间需求:

时间区间 区间 时间显示格式 举例
< 1min [0, 1m] 刚刚 Just Now
< 1hour [1m, 1h) N分钟前 16m ago
<= 6hour [1h, 6h] N小时前 6h ago
isToday N小时前 23h ago
isYesterday 昨天HH:mm Yesterday 12:12
isThisYear MM/DD HH:mm 01/31 23:59
other MM/DD/YYYY HH:mm 02/11/2022 00:00
注意: 按顺序满足条件

 


精确时间需求:

时间区间 区间 时间显示格式 举例
isToday HH:mm 14:14
isYesterday 昨天HH:mm Yesterday 12:12
isThisYear MM/DD HH:mm 01/31 23:59
other MM/DD/YYYY HH:mm 02/11/2022 00:00
注意: 按顺序满足条件

 


思维图:


 


代码实现


// 判断日期的状态
const checkAndGetDateState = (timestamp: number, currTimestamp: number) => {
  const year = window.dayjs(timestamp).year();
  const month = window.dayjs(timestamp).month();
  const date = window.dayjs(timestamp).date();

  const nowYear = window.dayjs(currTimestamp).year();
  const nowMonth = window.dayjs(currTimestamp).month();
  const nowDate = window.dayjs(currTimestamp).date();

  return {
    isToday: year === nowYear && month === nowMonth && date === nowDate,
    isYesterday: year === nowYear && month === nowMonth && date === nowDate - 1,
    isThisYear: year === nowYear,
  };
};

const getMoreYesterdayDate = (timestamp: number, currTimestamp: number, isZh: boolean = false) => {
  // 获取是否是今天、昨天、今年
  const { isYesterday, isThisYear } = checkAndGetDateState(timestamp, currTimestamp);

  if (isYesterday) {
    // 昨天
    return `${isZh ? '昨天' : 'Yesterday '}${window.dayjs(timestamp).format('HH:mm')}`;
  } else if (isThisYear) {
    // 今年
    return `${window.dayjs(timestamp).format('MM/DD HH:mm')}`;
  } else {
    // 往年
    return `${window.dayjs(timestamp).format('MM/DD/YYYY HH:mm')}`;
  }
};

// 精确时间转换
const preciseDateTimeTransfer = ({
  timestamp,
  currTimestamp,
  isZh = false,
}: {
  timestamp: number;
  currTimestamp: number;
  isZh?: boolean;
}) => {
  // 获取是否是今天、昨天、今年
  const { isToday } = checkAndGetDateState(timestamp, currTimestamp);

  if (isToday) {
    // 今天
    return window.dayjs(timestamp).format('HH:mm');
  } else {
    return getMoreYesterdayDate(timestamp, currTimestamp, isZh);
  }
};

const MILLISECONDS = 1000;
const SECONDS = 60;
const MINUTES = 60;
const SIX_HOURS = 6;
// 非精确时间转换
const inPreciseDateTimeTransfer = ({
  timestamp,
  currTimestamp,
  isZh = false,
}: {
  timestamp: number;
  currTimestamp: number;
  isZh?: boolean;
}) => {
  // 获取是否是今天、昨天、今年
  const { isToday } = checkAndGetDateState(timestamp, currTimestamp);
  // 60s内
  const isLessSixtySeconds = currTimestamp - timestamp < MILLISECONDS * SECONDS;
  // 60mins内
  const isLessSixtyMinutes = currTimestamp - timestamp < MILLISECONDS * SECONDS * MINUTES;
  // 6h内
  const isLessSixHours = currTimestamp - timestamp < MILLISECONDS * SECONDS * MINUTES * SIX_HOURS;

  if (isLessSixtySeconds) {
    // 60s内
    return isZh ? '刚刚' : 'Just now';
  } else if (isLessSixtyMinutes) {
    // 60mins内
    const mins = window.parseInt(`${(currTimestamp - timestamp) / MILLISECONDS / SECONDS}`);
    return `${mins}${isZh ? '分钟前' : 'm ago'}`;
  } else if (isLessSixHours || isToday) {
    // 6h内 or 今天
    const hours = window.parseInt(
      `${(currTimestamp - timestamp) / MILLISECONDS / SECONDS / MINUTES}`
    );
    return `${hours}${isZh ? '小时前' : 'h ago'}`;
  } else {
    return getMoreYesterdayDate(timestamp, currTimestamp, isZh);
  }
};

// 时间转换
export const dateTimeTransfer = ({
  timestamp,
  timestampDiff = 0,
  isZh = false,
  isPrecise = true,
}: {
  timestamp: number;
  timestampDiff?: number;
  isZh?: boolean;
  isPrecise?: boolean;
}) => {
  // 当前服务器时间戳
  const currTimestamp = new Date().getTime() + timestampDiff;

  if (isPrecise) {
    return preciseDateTimeTransfer({ timestamp, currTimestamp, isZh });
  }
  return inPreciseDateTimeTransfer({ timestamp, currTimestamp, isZh });
};
posted @ 2022-07-02 15:02  南歌子  阅读(1006)  评论(0编辑  收藏  举报