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 });
};
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章