dayjs日期格式化，开发uniapp或unicloud前后端进行时间格式转换

在这里插入图片描述

一、为什么要用日期格式化

因为在开发项目过程中，会遇到各种各样的日期格式，有的显示完整的年-月-日时:分:秒，而有的场景就只显示月-日等格式，还有就是显示当前时间和注册时间的间隔时长等，场景非常多，如下图举例所示：
在这里插入图片描述

在这里插入图片描述
之所以需要进行格式化转换，是因为我们在数据库存储日期的时候都是存储的时间戳（时间戳是指格林威治时间1970年01月01日00时00分00秒起至现在的总秒数），如下图①所示：

为什么不存储成②那种，看起来比时间戳那一堆数字更加直观那，原因就是因为时间戳是绝对值不存在时区时差的问题，如果要存储成②那种，需要关注服务器的时区，下面会介绍这里先不过多阐述了，所以后端存储时间基本都是约定俗成的存储时间戳，这样就导致前端拿到时间戳之后需要转换成我们可以阅读的时间格式如：2024年10月13日 18:22:33这样，因此前端处理后端传了过来的数据时候，经常要对时间戳进行转换。

二、如何将时间戳转为日期格式

1、自己写方法，进行转换

现在有了AI加持，让我们写代码变的很容易，你随便找一款AI让他给我们写一个JS方法，传入时间戳，输出年-月-日时:分:秒，AI轻松给我们写好一个方法，你只需要放到你的公共方法库便可使用这个方法，如下图所示：
在这里插入图片描述
想要什么功能，就写什么方法就可以了，但是这种方式格式及功能太过单一，也可能会存在一些没有检测出来的bug导致上线后出问题，原来我一直这样做，但是吃过几次亏之后感觉使用更加可靠的第三方库更靠谱一些。

2、使用第三方库

1）momentjs

官网地址：momentjs.com
中文网：momentjs.cn

在这里插入图片描述
上图是npmjs的数据，moment.js库周下载量22,104,960次，相当出名使用人超多，功能非常非常的多，那么问题就来了，包有点大，我们大多数情况下只需要他的基本功能就可以了，很多东西用户到，所以可能会导致我们项目打包过大，大家按需使用。

2）dayjs

官网地址：day.js.org
中文网：dayjs.fenxianglu.cn
Day.js 是一个轻量的处理时间和日期的 JavaScript 库，设计灵感来Moment.js和他的 API 设计保持完全一样，day.js的体积比moment.js更小，只有2KB左右。
在这里插入图片描述
看上面的下载量21,489,819就知道dayjs同样是一款比较受欢迎的js日期库，他的最大优势就是比较小，如果你会使用momentjs的话，那么你就会使用dayjs了，因为他们的使用方式是几乎一样的，之所以dayjs比较小，是因为插件是一个独立的模块，可以添加到Day.js来扩展功能或添加新特性，默认情况下，Day.js只提供核心代码，没有安装插件，可以根据需要加载多个插件。

三、 dayjs的常见用法

1.基础格式化format

dayjs().format("YYYY-MM-DD HH:mm:ss")  //2024-10-13 22:18:30
dayjs(1728509168538).format("YYYY年MM月DD HH时mm分ss秒") //2024年10月10 05时26分08秒
dayjs("2024/11/3").format("YYYY-MM-DD HH:mm:ss") //2024-11-03 00:00:00

更多格式化占位符

2.常用操作

1）加和减

//加7天
dayjs().add(7, 'day').format("YYYY-MM-DD HH:mm:ss"); //2024-10-20 22:57:33//减3月
dayjs("2024-10-13 22:25:33").subtract(3, 'M').format("YYYY-MM-DD HH:mm:ss");//2024-07-13 22:25:33

单位	缩写	描述
day	d	天
week	w	周
month	M	月
year	y	年
hour	h	小时
minute	m	分钟

更多占位符

2）时间的开始和结束

//今天的开始时间
dayjs().startOf('day').format("YYYY-MM-DD HH:mm:ss"); //2024-10-13 00:00:00//当前时间小时的结束
dayjs("2024-10-13 22:25:33").endOf('hour').format("YYYY-MM-DD HH:mm:ss"); //2024-10-13 22:59:59

单位	缩写	描述
day	d	天
month	M	月
year	y	年
hour	h	小时

更多占位符

3.常用查询

文档地址

1）是否相同

比较当前时间和给定时间是否相同，返回true或false

dayjs().isSame(dayjs('2024-10-10')); //false

isSame默认比较的是毫秒，如果只比较天或月份是否相同，需要设置第二个参数，此参数和上面占位符相同，可以是全称也可以是简写，如year、month、day可以改为y、M、d等

dayjs().isSame("2024-10-14",'day');  //true

2）是否之前和是否相同或之前

//是否在另一个提供的日期时间之前
dayjs('2024-10-10').isBefore('2024-10-15') //true//是否和另一个提供的日期时间相同或在其之前，这个需要依赖插件，如下所示
import dayjs from "dayjs";
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
dayjs.extend(isSameOrBefore);
dayjs('2024-10-10').isSameOrBefore('2024-10-10');  //true

3）是否之后和是否相同或之后

功能和isBefore是一样的，哪个用着习惯用哪个。

//否在另一个提供的日期时间之后
dayjs().isAfter(dayjs('2024-10-20'))
//是否和另一个提供的日期时间相同或在其之后
dayjs().isSameOrAfter(dayjs('2024-10-20'))

4）是否两者之间

dayjs('2024-10-10').isBetween('2024-10-1', dayjs('2024-10-25')); //true

4.其他我常用的

1）日期格式转换为时间戳

dayjs("2025-10-22").valueOf();  //1761062400000

2）日期间隔diff

返回指定单位下两个日期时间之间的差异

dayjs().diff('2020-09-15', 'day');  //1490//还有第三个参数，设置为true的时候将是一个浮点型的数值
dayjs().diff('2020-09-15', 'day');  //1490.645390925926

四、时区影响

在开始就提到过，向服务器存储时间大多数是存储时间戳，这是相对于1970年的绝对值，不会受到时区的影响，如果在服务器直接获取日期格式如：2024-10-20，这种日期会受时区影响，看下面的例子。

同样的一行代码，获取当前的时间，如果是本地运行，获取的时间是2024-10-14 16:01:36，在云端时间是2024-10-14 08:02:25，可以看到差了8个小时，因为本地是北京时间东八区，服务器是格林威治天文台时间零时区，差了8个时区8个小时，如果你在服务端没有注意时区的问题，那可就是大麻烦了。
在这里插入图片描述
如果你想在服务端也使用dayjs而且还需要考虑时区的问题，dayjs给我们提供了插件通过设置默认时区，我们可以按照下面的代码进行实现。

var dayjs = require('dayjs');
var utc = require('dayjs/plugin/utc')
var timezone = require('dayjs/plugin/timezone') // dependent on utc plugin
dayjs.extend(utc)
dayjs.extend(timezone)
dayjs.tz.setDefault("Asia/Shanghai")dayjs.tz().format("YYYY-MM-DD HH:mm:ss")  //获取当前时间格式化
dayjs.tz(1728893943018).format("YYYY-MM-DD HH:mm:ss")  //获取指定时间格式化