基于 date-fns 封装 utils

getTimestamp

获取当前时间或者某个时间的秒级时间戳

import {getUnixTime} from 'date-fns';

/**
 * @author zxyue25
 * @desc 获取当前时间或者某个时间的秒级时间戳；
 * 如果入参是毫秒秒级时间戳（13位）, 则去除最后三位1000返回毫秒级（13位）时间戳；主要场景在前端需要入参拿秒级时间戳给后端作为入参
 * @param date - Date | Number
 * @returns 返回格式化后的秒级时间戳 - Number
 * @example
 *
 */

export const getTimestamp = (date: number | Date = new Date()): number => getUnixTime(date);

getMilliTimestamp

获取当前时间或者某个时间的毫秒级时间戳

import {getTime} from 'date-fns';

/**
 * @author zxyue25
 * @desc 获取当前时间或者某个时间的毫秒级时间戳；
 * 如果入参是秒级时间戳（10位）, 则乘以1000返回毫秒级（13位）时间戳；主要场景在server返回了秒级时间戳, 前端先乘以1000转换成日期展示
 * TODO：这里传入了其他数字怎么处理？直接返回还是补齐13位返回？date-fns是直接返回, 建议直接返回
 * @param date - Date | Number
 * @returns 返回格式化后的毫秒级时间戳 - Number
 */
export const getMilliTimestamp = (date?: number | Date): number => {
    if (!date) {
        return getTime(new Date());
    } else {
        if (date instanceof Date) {
            return getTime(date);
        } else {
            if (date.toString().length === 10) {
                return getTime(date * 1000);
            } else {
                return date;
            }
        }
    }
};

formatDate

将时间戳转换为指定格式的日期；入参可以是秒级时间戳、毫秒级时间戳；

import {format} from 'date-fns';

/**
 * @author zxyue25
 * @desc 将时间戳转换为指定格式的日期；入参可以是秒级时间戳、毫秒级时间戳；
 * 如果入参是秒级时间戳（10位）, 会乘以1000转换；格式默认为'yyyy-MM-dd HH:mm'；
 * 主要场景：通常情况下时间戳转换日期不传格式, 而是用默认格式；后端返回的时间戳一般是秒级时间戳, 如果直接用date-fns需要自己乘1000传入
 * @param date - Date | Number
 * @param formatStr - String
 * @returns 返回格式化后的秒级时间戳 - Number
 * @example
 */

export const formatDate = (date: number | Date, formatStr = 'yyyy-MM-dd HH:mm') => {
    if (typeof date === 'number' && date.toString().length === 10) {
        return format(date * 1000, formatStr);
    } else {
        return format(date, formatStr);
    }
};

formatDateRange

将两个时间戳或者Date日期转换为指定格式的日期, 并用指定连接符连接；

import {formatDate} from './formatDate';

/**
 * @author zxyue25
 * @desc 将两个时间戳或者Date日期转换为指定格式的日期, 并用指定连接符连接；
 * 入参可以是秒级时间戳、毫秒级时间戳或者Date日期；如果入参是秒级时间戳（10位）, 会乘以1000转换；
 * 格式默认为`${yyyy/MM/dd} - `${yyyy/MM/dd}'；如果想更改格式, 可传入第三个参数（日期的格式）, 第四个参数（连接符的格式）
 * @param startDate - Date | Number
 * @param endDate - Date | Number
 * @param formatStr - String 默认格式'yyyy/MM/dd'
 * @param joinStr - String 默认连接符'-'
 * @returns 返回格式化后的日期区间字符串
 * @example
 */

export const formatDateRange = (
    startDate: number | Date,
    endDate: number | Date,
    formatStr = 'yyyy/MM/dd',
    joinStr = '-',
) => `${formatDate(startDate, formatStr || 'yyyy/MM/dd')} ${joinStr} ${formatDate(endDate, formatStr || 'yyyy/MM/dd')}`;

formatDateDistance

获取指定时间距离当前时间或者指定时间多远

import {formatDistance} from 'date-fns';

import {getMilliTimestamp} from './getMilliTimestamp';
import {LANGUAGE_DATE_FNS_MAP} from './locale';

/**
 * @author zxyue25
 * @desc 获取指定时间距离当前时间或者指定时间多远；
 * @param date - Date | Number
 * @param baseDate - Date | Number, 默认为当前时间
 * @param options - 扩展项, 可以配置语言, 有两种方式：传入语言类型lang；或者直接传入Locale；
 * @returns 返回描述“指定时间距离当前时间或者指定时间多远”的字符串, 有多语言处理
 * @example
 */

type OptionType = {
    locale?: Locale;
    addSuffix?: boolean;
    lang?: keyof typeof LANGUAGE_DATE_FNS_MAP;
};

export const formatDateDistance = (
    date: Date | number = 0,
    baseDate: Date | number = new Date(),
    options?: OptionType,
): string => {
    const initOptions = {
        addSuffix: options?.addSuffix || true,
        locale: options?.locale || LANGUAGE_DATE_FNS_MAP[options?.lang || 'en'],
        ...options,
    };
    if (
        (typeof date === 'number' && date.toString().length === 10) ||
        (typeof baseDate === 'number' && baseDate.toString().length === 10)
    ) {
        return formatDistance(getMilliTimestamp(date), getMilliTimestamp(baseDate), initOptions);
    }
    return formatDistance(date, baseDate, initOptions);
};

formatDateDuration

将指定秒转为‘H小时M分钟S秒’, H、M、S为0时, 默认不展示；如果想更改格式可传入第二个扩展参数options

import {formatDuration} from 'date-fns';

import {LANGUAGE_DATE_FNS_MAP} from './locale';

/**
 * @author zxyue25
 * @desc 将指定秒转为‘H小时M分钟S秒’, H、M、S为0时, 默认不展示；如果想更改格式可传入第二个扩展参数options
 * @param second - Number, 多少秒
 * @param options - 扩展项, 可以配置语言, 有两种方式：传入语言类型lang；或者直接传入Locale；
 * @returns 返回描述“H小时M分钟S秒”的字符串, 有多语言处理
 * @example
 */

type OptionType = {
    locale?: Locale;
    zero?: boolean;
    delimiter?: string;
    format?: Array<string>;
    lang?: keyof typeof LANGUAGE_DATE_FNS_MAP;
};

export const formatDateDuration = (second: number, options?: OptionType) => {
    const hours = Math.floor(second / 3600);
    const minutes = Math.floor((second % 3600) / 60);
    const seconds = Math.floor(second % 60);

    return formatDuration(
        {
            hours,
            minutes,
            seconds,
        },
        {
            zero: options?.zero || false,
            locale: options?.locale || LANGUAGE_DATE_FNS_MAP[options?.lang || 'en'],
            ...options,
        },
    ).replace(/ /g, '');
};