基于 date-fns 封装 utils
2024-05-10 03:41:27
基于 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, '');
};基于 date-fns 封装 utils相关推荐
- 基于vue element-ui 封装上传图片组件 功能:上传,删除,预览,上传图片水印,拖拽排序,上传进度条等
学习目标: 我们在开发后台时肯定避免不了上传图片的功能 例如: 上传图片回显 上传完成 : 预览查看 , 删除等 如果是图片列表,还可能让你拖动图片排序 有的后台项目可能要给图片添加水印,添加标记 有 ...
- 最简单的基于FFMPEG的封装格式转换器（无编解码）
2019独角兽企业重金招聘Python工程师标准>>> 本文介绍一个基于FFMPEG的封装格式转换器.所谓的封装格式转换,就是在AVI,FLV,MKV,MP4这些格式之间转换(对应. ...
- php连接数据库封装函数,PHP基于MySQLI函数封装的数据库连接工具类【定义与用法】...
本文实例讲述了PHP基于MySQLI函数封装的数据库连接工具类.分享给大家供大家参考,具体如下: mysql.class.php: class mysql { private $mysqli; pri ...
- Django框架之DRF 基于mixins来封装的视图
阅读目录 基础视图 基于mixins来封装的视图 mixins封装再封装,第三种方法 第四种写法,再次封装,全部写在一个类中 基础视图 示例环境搭建:新建一个Django项目,连接Mysql数据库,配 ...
- 原生JS基于window.scrollTo()封装垂直滚动动画工具函数
概要: 原生JS基于window.scrollTo()封装垂直滚动动画工具函数,可应用与锚点定位.回到顶部等操作. ####封装原因: 在vue项目中,遇到需要实现垂直滚动效果的需求,初步想到的方法有 ...
- 基于AFNetworking的封装的工具类
基于AFNetworking的封装的工具类MXERequestService // // MXERequestService.h // testAFNetWorking // // Created b ...
- dio设置自定义post请求_基于dio库封装flutter项目的标准网络框架
网络框架是每个应用的基石,封装一个好的网络框架不仅是项目的一个好的开始,并且直接影响到随后项目的稳定性和可扩展性.在移动开发的各个端都有非常赞的网络请求基础框架,比如Android的okhttp库.s ...
- 初探 amaze-vue（ 基于vue.js封装的Amaze UI 组件库）
Amaze UI 是以移动优先(Mobile first)为理念,面向 HTML5 开发的国产优秀组件库.因官方未提供vue.js版本,而且民间一直对vue.js版本的 Amaze UI 组件库呼声很 ...
- 最简单的基于FFmpeg的封装格式处理：视音频分离器（demuxer）
===================================================== 最简单的基于FFmpeg的封装格式处理系列文章列表: 最简单的基于FFmpeg的封装格式处理 ...
最新文章
- Rstudio查看关联的R
- python中and与or的执行顺序-python 代码运行顺序问题？
- hadoop学习--数据排序
- leetcode 150. 逆波兰表达式求值（栈）
- typedef 数组使用详解
- 最常见并发面试题整理！（速度收藏）
- Ubuntu MySQL 配置 time_zone
- yii php 弹窗,Yii框架弹出框功能示例
- 计算机无法用630打印机,手把手为你解决win10系统安装630k打印机驱动的设置方法...
- pdf文档怎么转换成word格式，pdf转word的方法
- android 分区 加密软件,VeraCrypt(硬盘分区加密软件)
- vue图片加载不出来的问题
- 苹果手机和安卓手机分享的区别
- 大屏联屏发布系统解决方案
- react 监听键盘事件及多按键事件
- Android8.0 系统启动之孵化准备
- Java有关集合的练习
- 地产“罗生门”：是世茂“不讲武德”，还是福晟“谎话连篇”？
- Unity点击物体后，移动到物体所在位置
- 学雷锋做好事留名是发挥正能量的勇气！