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

news2024/10/22 1:53:09

在这里插入图片描述

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

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

在这里插入图片描述
之所以需要进行格式化转换,是因为我们在数据库存储日期的时候都是存储的时间戳(时间戳是指格林威治时间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还有很多的属性,上面文档已经给了官方的地址,大家可以自己研究一下他的更多用法,我的这篇文章列举了一下常见的用法,希望通过这篇文章的学习,能够在开发中帮助到你,提升你的开发效率。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

[python]从零开始的API调用教程

一、API是什么? API即应用程序编程接口,是一组定义了不同软件系统或组件之间如何交互的规则和协议。API为开发者提供了一种简化的方式,通过预定义的函数或方法,来使用某个软件、库、操作系统或硬件的功能,而不需要深入…

图像编辑大一统?多功能图像编辑框架Dedit:可基于图像、文本和掩码进行图像编辑。

今天给大家介绍一个基于图像和文本的编辑的框架D-Edit,它是第一个可以通过掩码编辑实现图像编辑的项目,近期已经在HuggingFace开放使用,并一度冲到了热门项目Top5。 使用 D-Edit 的编辑流程。用户首先上传一张分割成多个项目的图像。微调 DPM…

CTFHUB技能树之文件上传——前端验证

开启靶场,打开链接: 看到提示是js前端验证 直接F12查看前端源代码: 可以看出对上传的文件做了限制,只能上传.jpg、.png、.gif文件 (小插曲:本来我想着直接删除onsubmit处的代码的,但是删了之后…

沈阳乐晟睿浩科技有限公司:引领抖音小店迈向新纪元

在当今数字化浪潮汹涌的时代,电子商务以其独特的魅力和无限潜力,正深刻改变着人们的消费习惯与商业模式。在这场变革中,沈阳乐晟睿浩科技有限公司凭借其敏锐的市场洞察力和卓越的技术实力,成为了抖音小店领域的佼佼者,…

功能推荐 | TopOn 智能管家,开发者收益提升好帮手,一键托管自动提升ARPU!

01 什么是智能管家 智能管家,是TopOn SDK基于广告位填充率、广告源预估收益等大数据学习的基础上开发的一项新功能,它能根据当前开发者流量分组瀑布流配置的数据情况,自动判断对应广告源是否需要开启/关闭,以及是否需要增加Biddi…

SpringBoot整合mybatisPlus实现批量插入并获取ID

背景:需要实现批量插入并且得到插入后的ID。 使用for循环进行insert这里就不说了,在海量数据下其性能是最慢的。数据量小的情况下,没什么区别。 【1】saveBatch(一万条数据总耗时:2478ms) mybatisplus扩展包提供的:…

Verilator——最简单、最细节上手教程

目录 前言工具安装Verilator 安装GTKwave 安装 Verilator 基础用法fst格式和vcd格式的wave文件Verilator 的使用 Verilator 的进阶使用与GDB搭配与makefile搭配 Verilator 的高阶用法访问模块内部数据 前言 此教程会以ubuntu22.04为例 从如何安装,到如何使用 全程帮…

coze上构建必应搜索工作流

首先登入COZE网站,打开工作空间,进入后默认是个人空间,在其下方选择资源库,最后在右上角点击资源按钮,在弹出的列表中点击工作流。 构建必应搜索工作流 Coze官方介绍:必应搜索插件,其中插件输…

【网络】IP协议的地址管理

【网络】IP协议的地址管理 一. IP协议格式二. 地址管理1.动态分配IP地址2.NAT机制2.1 NAT机制下网络的请求/响应 3. 网段划分3.1 特殊的IP地址 4.路由选择5.DNS域名解析系统 一. IP协议格式 4位版本号(version): 指定IP协议的版本(IPv4/IPv6), 对于IPv4来…

AI工具:最受欢迎与最佳体验的探索

在当今数字化的时代,人工智能(AI)技术的广泛应用正在彻底改变我们的生活方式、工作方式和社会交往。AI工具不仅在工业生产、医疗诊断、金融服务等领域发挥着关键作用,还深入日常生活,为人们带来便捷与高效。本文将探讨…

基于SpringBoot的旅店管理系统的设计与实现源码+Vue前端(酒店、民宿、功能较多)

💗博主介绍💗:✌在职Java研发工程师、专注于程序设计、源码分享、技术交流、专注于Java技术领域和毕业设计✌ 温馨提示:文末有 CSDN 平台官方提供的老师 Wechat / QQ 名片 :) Java精品实战案例《700套》 2025最新毕业设计选题推荐…

基于JSP实习管理系统【附源码】

基于SSM的学生管理系统(源码L文说明文档) 目录 4 系统设计 4.1 系统概述 4.2系统功能结构设计 4.3数据库设计 4.3.1数据库E-R图设计 4.3.2 数据库表结构设计 5 系统实现 5.1管理员功能介绍 5.1.1管理员登录 5.1.2…

RuoYi-Vue若依 环境搭建 速成

一、若依简介 RuoYi-Vue 是一个开源的后台管理系统,适用于快速开发企业级应用。该平台由两部分组成:前端和后端。 (1)技术框架 前端技术: Vue.js: 前端框架使用 Vue.js,这是一种流行的JavaScript框架&a…

鸿蒙网络编程系列28-服务端证书锁定防范中间人攻击示例

1. TLS通讯中间人攻击及防范简介 TLS安全通讯的基础是基于对操作系统或者浏览器根证书的信任,如果CA证书签发机构被入侵,或者设备内置证书被篡改,都会导致TLS握手环节面临中间人攻击的风险。其实,这种风险被善意利用的情况还是很…

数据结构与算法——Java实现 44.翻转二叉树

目录 226. 翻转二叉树 思路 代码 本地代码测试 不管前方的路有多苦 只要走的方向正确 不管多么崎岖不平 都比站在原地更接近幸福 —— 24.10.21 226. 翻转二叉树 给你一棵二叉树的根节点 root ,翻转这棵二叉树,并返回其根节点。 示例 1: 输…

GEE引擎传奇UI界面修改教程

还记得小林之前给大家分享了gom引擎UI界面编辑教程,今天给大家分享一下gee引擎UI界面修改教程 首先打开登录器生成器-客户端界面设置 在客户端界面设置这里可以自定义UI素材,也可以直接在原素材上编辑主界面 传奇根目录指向的是你的传奇客户端根目录&am…

单神经元建模:基于电导的模型[神经元结构、静息电位和等效电路]

文章目录 神经元结构、静息电位和等效电路神经元结构静息电位能斯特方程1. **描述浓度比的非线性关系**:2. **化学势与电势的关系**:3. **对称性**:4. **热力学与平衡**:总结: GHK方程Nernst方程和GHK方程的对比 等效电…

深度学习:YOLO目标检测和YOLO-V1算法损失函数的计算

简介 YOLO(You Only Look Once)是一种基于深度学习的目标检测算法,它的核心思想是将目标检测问题转化为一个回归问题,通过一个神经网络直接预测目标的类别和位置。 YOLO算法将输入图像分成SxS个网格,每个网格负责预测…

cefsharp79.1.360(Chromium 79.0.3945.130)支持H264视频播放-PDF预览 老版本回顾系列体验

一、关于此版本 版本:Cef 79.1.36/CefSharp 79.1.360/Chromium 79.0.3945.130/支持H264/支持PDF预览 支持PDF预览和H264推荐版本 63/79/84/88/100/111/125 运行环境需要 visual c++ 2015不支持xp/vista/2003/2008默认不支持h264(版权问题)支持打印预览 print preview已知问题…

Kafka之原理解析

定义 Kafka 是一个分布式流媒体平台,kafka官网:http://kafka.apache.org/ Kafka 是一种高吞吐量、分布式、基于发布/订阅的消息系统,最初由 LinkedIn 公司开发,使用Scala 语言编写,目前是Apache 的开源项目。 流媒体…