dayjs时间转换,模糊时间、精确时间
前言
- 关于dayjs:
https://dayjs.fenxianglu.cn/category/#typescript - 关于模糊时间、精确时间
模糊时间、精确时间
模糊时间需求:
时间区间 | 区间 | 时间显示格式 | 举例 |
---|---|---|---|
< 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 });
};