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
单位缩写描述
dayd
weekw
monthM
yeary
hourh小时
minutem分钟

更多占位符

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
单位缩写描述
dayd
monthM
yeary
hourh小时

更多占位符

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")  //获取指定时间格式化

Asia/Shanghai这个是代表时区,亚洲/上海,你也可以设置其他时区,下面连接时全球的标识符,可以选择自己需要的时区。
全球时区标识符 - 传送门

最后

dayjs还有很多的属性,上面文档已经给了官方的地址,大家可以自己研究一下他的更多用法,我的这篇文章列举了一下常见的用法,希望通过这篇文章的学习,能够在开发中帮助到你,提升你的开发效率。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/893084.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

学习 Flutter 的最佳路线图

学习 Flutter 的最佳路线图 视频 https://youtu.be/IpKXVq9lP_4 https://www.bilibili.com/video/BV1J92uYDEit/ 前言 原文 Flutter 开发者必看:全面的学习路线图 本文借鉴了 roadmap 的思路,为大家介绍如何有效学习 Flutter。 该路线图提供了从零开…

MySQL-DQL练习题

文章目录 简介初始化表练习题 简介 本节简介: 主要是一些给出一些习题, 关于DQL查询相关的, DQL查询语句是最重要的SQL语句, 功能性最复杂, 功能也最强, 所以本节建议适合以及有了DQL查询基础的食用, 另外注意我们使用的是Navicat, SQL编辑的格式规范也是Navicat指定的默认格式…

uni-app uni.setTabBarBadge 不生效

‘text’属性,类型必须是字符串,而接口返回的是数值,没有注意到,所以怎么都不生效,也不会有报错!

基于一个python库tencent的API接口开发有趣应用

这篇博客给大家介绍一个python库 tencent (https://pypi.org/project/tencent/) 以及对应三方API的开发流程,以公众号后台通过服务器接入自动系统回复为例。基于微信公众号后台开发自动回复,或者利用多模态信息回复用户输入,需要自己有独立服…

python爬虫实战案例——从移动端接口抓取微博评论,采用cookie登陆,数据存入excel表格,超详细(15)

文章目录 1、任务目标2、网页分析3、代码编写3.1 代码分析3.2 完整代码1、任务目标 1、目标网站:微博文章(https://m.weibo.cn/detail/4813628149072458),这是微博某一篇博文,用于本文测试 2、要求:爬取该博文下,所有一级评论和二级评论,以及每条评论的作者,最后保存至E…

【Kafka】Kafka源码解析之producer过程解读

从本篇开始 打算用三篇文章 分别介绍下Producer生产消费,Consumer消费消息 以及Spring是如何集成Kafka 三部分,致于对于Broker的源码解析,因为是scala语言写的,暂时不打算进行学习分享。 总体介绍 clients : 保存的是Kafka客户端…

Docker新手必看:快速安装和配置BookStack在线文档系统

文章目录 前言1. 安装Docker2. Docker镜像源添加方法3. 创建并启动BookStack容器4. 登录与简单使用5. 公网远程访问本地BookStack5.1 内网穿透工具安装5.2 创建远程连接公网地址5.3 使用固定公网地址远程访问 前言 本文主要介绍如何在Linux系统使用Docker本地部署在线文档管理…

基于SSM医药垃圾分类管理系统【附源码】

基于SSM医药垃圾分类管理系统 效果如下: 系统登录界面 管理员主界面 公告信息管理界面 垃圾分类管理界面 医院垃圾信息管理界面 用户主界面 留言反馈管理界面 研究背景 随着科学技术发展,计算机已成为人们生活中必不可少的生活办公工具,在…

Java语言-抽象类

目录 1.抽象类概念 2.抽象类语法 3.抽象类特性 4.抽象类作用 1.抽象类概念 在面向对象的概念中,所有的对象都是通过类来描绘的,但是反过来,并不是所有的类都是用来描绘对象的, 如果 一个类中没有包含足够的信息来描绘一个具体…

初阶数据结构【2】--顺序表(详细且通俗易懂,不看一下吗?)

本章概述 线性表顺序表顺序表问题与思考彩蛋时刻!!! 线性表 概念:一些在逻辑上成线性关系的数据结构的集合。线性表在逻辑上一定成线性结构,在物理层面上不一定成线性结构。常见的线性表:顺序表&#xff0…

ICT产业新征程:深度融合与高质量发展

在信息时代的浪潮中,每一场关于技术革新与产业融合的盛会都闪耀着智慧的光芒,引领着未来的方向。9月25日,北京国家会议中心内,一场聚焦全球信息通信业的顶级盛事——第32届“国际信息通信展”(PT展)隆重拉开…

C++新手入门指南:从基础概念到实践之路

C 继承了 C 语言的高效性和灵活性,同时新增了面向对象编程的特点。这使得 C 既可以进行底层系统编程,又能进行面向对象的软件设计。在面向对象编程方面,C 支持封装、继承和多态三大特性。 💯C 初印象 语言的发展就像是练功打怪…

【Docker】Docker基本操作

目录 一、了解云计算背景 1.1 云计算的三种服务模式 1.2 虚拟机的两种架构 二、Docker 概述 2.1 Docker简述 2.2 Docker 特点 2.3 Docker与虚拟机的区别 2.4 容器技术有哪些 2.4.1 namespace的六项隔离 2.5 Docker核心概念 2.5.1 镜像 2.5.2 容器 2.5.3 仓库 三、…

吴恩达深度学习笔记(6)

正交化 为了提高算法准确率,我们想到的方法 收集更多的训练数据增强样本多样性使用梯度下降将算法使算法训练时间更长换一种优化算法更复杂或者更简单的神经网络利用dropout 或者L2正则化改变网络框架更换激活函数改变隐藏单元个数 为了使有监督机制的学习系统良…

笔试强训10.17

//法一&#xff1a;中点扩散 //法二&#xff1a;动态规划 //法三&#xff1a;hash二分 #include<bits/stdc.h> using namespace std; typedef unsigned long long ull; const int N1e610; const int base131; ull hr[2*N],hl[2*N],p[2*N];//超过ull自动取余 char s[N*2];…

如何优化批处理策略,最大限度地“压榨”GPU性能

新手数据科学家和机器学习工程师常常会问一个关键问题&#xff1a;如何判断他们的深度学习训练过程是否在正常运行&#xff1f;在本文中&#xff0c;我们将学习如何诊断和优化深度学习的性能问题&#xff0c;不论是在单台机器还是多台机器上进行训练。通过这些方法&#xff0c;…

uniapp onPageScroll

子组件有onPageScroll, 首页也要引入onPageScroll, eg: 主页面 sell/detail/index 《子组件》 <script setup> 引入onPageScroll </script> 组件&#xff1a; 引入onPageScroll 别人的比较

阿里 C++面试,算法题没做出来,,,

我本人是非科班学 C 后端和嵌入式的。在我面试的过程中&#xff0c;竟然得到了阿里​ C 研发工程师的面试机会。因为&#xff0c;阿里主要是用 Java 比较多&#xff0c;C 的岗位比较少​&#xff0c;所以感觉这个机会还是挺难得的。 阿里 C 研发工程师面试考了我一道类似于快速…

五个必备的高清无水印视频素材库推荐

做抖音、短视频创作的朋友都知道&#xff0c;优质的素材往往决定了作品能否获得更多关注。如果你还不知道在哪里下载高清无水印的视频素材&#xff0c;不用担心&#xff01;今天为你推荐5个高品质的视频素材库&#xff0c;助你轻松创作出爆款视频。 蛙学网 是国内领先的视频素材…

Windows 11 24H2版本有哪些新功能_Windows 11 24H2十四大新功能介绍

距离上次发布的23H2版本已经过去了一年时间&#xff0c;现在&#xff0c;Win 11的24H2版本终于等到了&#xff0c;微软已经全面公开发布Win11 24H2版本&#xff0c;版本号为26100.1742&#xff0c;此次官宣的版本包括了消费者版、商业版、LTSC 2024版等&#xff0c;各种语言版本…