Vue中如何使用dayjs

Day.js中文网Day.js是一个极简的JavaScript库,可以为现代浏览器解析、验证、操作和显示日期和时间。icon-default.png?t=N7T8https://dayjs.fenxianglu.cn/

单位不区别大小写,支持复数和缩写形式

单位缩写描述

date

D日期 [1,31]
dayd星期 [0,6](星期日0,星期六6)
monthM月份 [0,11] (0表示1月份)
yeary年 [1,31]
hourh小时 [0,23]
minutem分钟 [0,59]
seconds秒 [0,59]
millisecondms毫秒 [0,999]

 把dayjs()对象当成一个中转站,往后所有的关于日期的计算都先转成dayjs()对象,再进行加减等运行。 

一、下载dayjs

cnpm i -S dayjs

二、引入dayjs

如果在node中,引入方式为:let dayjs=require('dayjs')

如果在vue项目中,在main.js中全局引入:

import dayjs from "dayjs"
Vue.prototype.$dayjs = dayjs;

局部引入只需:import dayjs from "dayjs"即可 

dayjs()对象:

即当前时间,dayjs()等价于dayjs(Date.now())、dayjs(new Date())

dayjs()对象格式化: 

格式化dayjs()对象为YYYY-MM-DD HH:mm:ss格式: 

 

 

 从dayjs()对象中获取年月日时分秒:

 代码:

    console.log("dayjs().get('year'):", dayjs().get("year")); //年 [1,366]console.log("dayjs().get('month'):", dayjs().get("month")); //月 [0,11] 0表示1月console.log("dayjs().get('date'):", dayjs().get("date")); //日[1,31]console.log("dayjs().get('hour'):", dayjs().get("hour")); //时 [0,23]console.log("dayjs().get('minute'):", dayjs().get("minute")); //分 [0,59]console.log("dayjs().get('second'):", dayjs().get("second")); //秒 [0,59]console.log("dayjs().get('millisecond'):", dayjs().get("millisecond")); //毫秒[0,999]console.log("dayjs().get('day'):", dayjs().get("day")); //星期几 [0,6]。0(星期日)到6(星期六)

 用单数复数,大写小写,缩写都可以,如year,years,y,Y

dayjs对象-加减指定的时间

    console.log("当前时间:", `${this.$dayjs().format("YYYY-MM-DD hh:mm:ss")}`);console.log("昨天:",`${this.$dayjs().subtract(1, "day").format("YYYY-MM-DD")} 00:00:00`);

dayjs对象-判断2个日期大小 

dayjs对象-判断某个日期是否在2个日期之间 

 此功能需要引入isBetween插件,引入方式如下(Day.js 的 isBetween 方法是 Day.js 库的一部分,因此当你下载和安装 Day.js 时,isBetween会自动包含在其中):

import isBetween from "dayjs/plugin/isBetween";
dayjs.extend(isBetween);

 测试:

console.log("当前时间:", dayjs().format("YYYY-MM-DD"));console.log('2022-1-1 < 当前时间 < 2022-12-31 吗?',  dayjs().isBetween("2022-1-1", dayjs("2022-12-31")));

 dayjs对象-2个日期之间相差多少时、分、秒等

    let time1 = dayjs("2011-7-19 00:00:00");let time2 = dayjs("2011-7-19 01:40:00");console.log("time1:", time1);console.log("time2:", time2);console.log("time1和time2相差多少hour:", time2.diff(time1, "hour"));console.log("time1和time2相差多少minute:", time2.diff(time1, "minute"));console.log("time1和time2相差多少second:", time2.diff(time1, "second"));

各种日期转dayjs对象

普通时间转dayjs

中国标准时间转dayjs 

示例1: 

示例2:

 

示例3:

 

时间戳(ms)转dayjs

时间戳(s)转dayjs 

通过new Date().getTime()获取的时间戳是毫秒级的,为了在某些情况下方便和其他秒级的时间戳比较大小,现需要将毫秒级的转为秒级的,方式如下:

    console.log("new Date():", new Date())console.log("new Date().getTime():", new Date().getTime())console.log("new Date().getTime()/1000:", new Date().getTime() / 1000)console.log("parseInt(new Date().getTime() / 1000):", parseInt(new Date().getTime() / 1000))console.log("Date.parse(new Date())/1000:", Date.parse(new Date()) / 1000)

秒级的时间戳转dayjs必须用dayjs.unix(),如下:

 

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

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

相关文章

迪萧科技有限公司邀您参观2024生物发酵展

参展企业介绍 浙江迪萧科技有限公司位于浙江杭州&#xff0c;是一家专注于膜技术的国家高新企业。公司针对食品饮料、医药保健等领域的过程分离与控制、产品提取及浓缩、废料资源化利用等提供全方案解决服务。坚持以“顾客至上、优质服务、卓越品质”为原则。为客户企业提供清…

视频批量瘦身:一键缩小尺寸,轻松处理海量视频

在如今视频内容爆炸的时代&#xff0c;无论是个人创作者还是企业团队&#xff0c;都面临着处理大量视频的需求。而视频尺寸过大往往会导致上传缓慢、存储空间不足等问题。为了解决这个问题&#xff0c;我们推出了一款强大的视频批量剪辑工具&#xff0c;让你轻松实现视频尺寸批…

NXP实战笔记(七):S32K3xx基于RTD-SDK在S32DS上配置ICU输入捕获

目录 1、概述 2、输入捕获SDK配置 2.1、SAIC中断方式 2.2、IPWM或者IPM 1、概述 输入捕获&#xff0c;可以抓取高电平时间、低电平时间、占空比、周期、边沿检测与回调函数、边沿计数&#xff08;ABZ解码&#xff09;、时间戳、唤醒中断。 记录一下根据Emios模块实现上述部分…

【ARMv8M Cortex-M33 系列 8.1 -- RT-Thread 堆内存 检查命令 free 实现及介绍】

文章目录 RT-Thread 堆内存 检查命令 free 实现及介绍rt_memory_info 函数验证 RT-Thread 堆内存 检查命令 free 实现及介绍 在RT-Thread系统中&#xff0c;通常可以通过rt_memory_info函数获取当前的堆内存使用信息&#xff0c;然后你可以包装这个函数来显示剩余的堆空间。rt…

最全整理,软件测试-Web页面测试思路总结,13年经验...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、Web功能测试 …

【EI会议征稿通知】第十届机械工程、材料和自动化技术国际会议(MMEAT 2024)

2024年第十届机械工程、材料和自动化技术国际会议(MMEAT 2024) 2024 10th International Conference on Mechanical Engineering,Materials and Automation Technology 2024年第十届机械工程、材料和自动化技术国际会议( MMEAT 2024) 将于2024年06月21-23日在中国武汉举行。MM…

docker自定义网络实现容器之间的通信

Background docker原理 docker是一个Client-Server结构的系统&#xff0c;Docker的守护进程运行在主机上。通过Socket从客户端访问。docker核心三大组件&#xff1a;image–镜像、container-容器、 repository-仓库。docker使用的cpu、内存以及系统内核等资源都是直接使用宿主…

最简单方式把jar打包成Windows服务

废话 &#x1f622; 将JAR文件转化为Windows服务是一种高效且常见的Java应用部署策略。这种转变赋予了Java应用程序在Windows操作系统上以无界面后台服务模式运行的能力&#xff0c;从而实现了持续、稳定且可靠的功能提供。这种部署方式不仅提升了应用的可用性&#xff0c…

导入excel某些数值是0

目录 导入excel某些数值是0数据全部都是0原因解决 部分数据是0原因解决 导入excel某些数值是0 数据全部都是0 有一列“工单本月入库重量”全部的数据都是0 原因 展示的时候&#xff0c;展示的字段和内表需要展示的字段不一致&#xff0c;导致显示的是0。 解决 修改展示的字…

kubernetes面试题及核心知识点

无状态负载deployment有状态管理 &#xff1a; config配置文件 secret密码文件 内置volumn插件 1、emptyDir宿主机的存储为容器分配资源。临时储存&#xff0c;随着pod的删除而消失&#xff0c; 2、hostPath宿主机的存储为容器分配资源。不会随着pod的删除而消失&#xf…

Video generation models as world simulators-视频生成模型作为世界模拟器

原文地址&#xff1a;Video generation models as world simulators 我们探索在视频数据上进行大规模生成模型的训练。具体来说&#xff0c;我们联合训练文本条件扩散模型&#xff0c;同时处理不同持续时间、分辨率和长宽比的视频和图像。我们利用一个在视频和图像潜在编码的时…

AGI|AI到底如何生成视频?Sora究竟为何能引爆科技圈?

目录 一、AI生成视频引发新浪潮 二、生成方法及难点 三、Sora的突破进展 &#xff08;一&#xff09;可生成不同尺寸视频 &#xff08;二&#xff09;可生成1分钟时长视频 &#xff08;三&#xff09;图片生成视频 &#xff08;四&#xff09;场景一致性 &#xff08;五…

Window部署Exceptionless

Exceptionless Elasticsearch 版本&#xff1a; Exceptionless&#xff1a;8.1.0 Elasticsearch&#xff1a;7.17.5 JDK&#xff1a;11.0.10 目录 一、Elasticsearch运行 二、 Exceptionless 一、Elasticsearch运行 bin目录下elasticsearch.bat 直接运行 访问 http://lo…

使用gstreamer和opencv实时识别LED数码管数字的测试demo(QT)

效果演示: 效果1:静态识别 效果2:动态实时识别 可以看到,虽然不太稳定,但是好歹还是识别出来了的,就是需要调参,然鹅我不是专业的,目前还没有调好。。。 T_T 先这样吧。以后再说。 觉得文章质量可以的,请点个赞哦,谢谢。 前言 最近需要完成使用op…

ElementUI组件的安装和使用

Element UI 是一款基于 Vue 2.0 的桌面端组件库&#xff0c;主要用于快速构建网站的前端部分。它提供了丰富的组件&#xff0c;如按钮、输入框、表格、标签页等&#xff0c;以及一些布局元素&#xff0c;如布局容器、分割线等。Element UI 的设计风格简洁&#xff0c;易于上手&…

【前端素材】推荐优质后台管理系统Airmin平台模板(附源码)

一、需求分析 系统定义 后台管理系统是一种用于管理和监控网站、应用程序或系统的在线工具。它通常是通过网页界面进行访问和操作&#xff0c;用于管理网站内容、用户权限、数据分析等。后台管理系统是网站或应用程序的控制中心&#xff0c;管理员可以通过后台系统进行各种管…

第四十二回 假李逵翦径劫单身 黑旋风沂岭杀四虎-python读写csv和json数据

李逵答应了宋江三件事&#xff1a;不可吃酒&#xff0c;独自前行&#xff0c;不带板斧。李逵痛快答应了&#xff0c;挎一口腰刀&#xff0c;提着朴刀&#xff0c;带了一锭大银子&#xff0c;三五个小银子就下山去了。 宋江放心不下&#xff0c;于是请同乡朱贵也回家一趟&#…

arcgisPro制图输出

1、设置地图底图 2、导入数据 3、 设置图形颜色&#xff0c;如下&#xff1a;右键“浙江省”数据层&#xff0c;选择符号系统 4、在右侧可看到打开的符号系统栏&#xff0c;进行如下设置: 5、移除“其他所有值”项&#xff0c;如下&#xff1a; 6、设置图形轮廓&#xff0c;如下…

【MATLAB】CEEMD_ MFE_SVM_LSTM 神经网络时序预测算法

有意向获取代码&#xff0c;请转文末观看代码获取方式~也可转原文链接获取~ 1 基本定义 CEEMD_MFE_SVM_LSTM神经网络时序预测算法是一种结合了多种先进技术的复杂预测方法&#xff0c;旨在提高时序预测的准确性和稳定性。下面是对该算法的详细介绍&#xff1a; CEEMD&#xff…

ES项目应用

配置: ES存储了2-3亿条&#xff0c;几百GB ES集群有5 个节点 2主2副 ES返回数据量窗口大小设置 index.max_result_window 深度翻页 1.from size 方式 2.scroll相当于维护了一份当前索引段的快照信息&#xff0c;这个快照信息是你执行这个scroll查询时的快照。在这个查询后的任…