Vue中如何使用dayjs

2024-02-23 09:28

本文主要是介绍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(),如下:

 

这篇关于Vue中如何使用dayjs的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/738169

相关文章

Java使用ANTLR4对Lua脚本语法校验详解

《Java使用ANTLR4对Lua脚本语法校验详解》ANTLR是一个强大的解析器生成器,用于读取、处理、执行或翻译结构化文本或二进制文件,下面就跟随小编一起看看Java如何使用ANTLR4对Lua脚本... 目录什么是ANTLR?第一个例子ANTLR4 的工作流程Lua脚本语法校验准备一个Lua Gramm

Java Optional的使用技巧与最佳实践

《JavaOptional的使用技巧与最佳实践》在Java中,Optional是用于优雅处理null的容器类,其核心目标是显式提醒开发者处理空值场景,避免NullPointerExce... 目录一、Optional 的核心用途二、使用技巧与最佳实践三、常见误区与反模式四、替代方案与扩展五、总结在 Java

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

使用Java将DOCX文档解析为Markdown文档的代码实现

《使用Java将DOCX文档解析为Markdown文档的代码实现》在现代文档处理中,Markdown(MD)因其简洁的语法和良好的可读性,逐渐成为开发者、技术写作者和内容创作者的首选格式,然而,许多文... 目录引言1. 工具和库介绍2. 安装依赖库3. 使用Apache POI解析DOCX文档4. 将解析

Qt中QUndoView控件的具体使用

《Qt中QUndoView控件的具体使用》QUndoView是Qt框架中用于可视化显示QUndoStack内容的控件,本文主要介绍了Qt中QUndoView控件的具体使用,具有一定的参考价值,感兴趣的... 目录引言一、QUndoView 的用途二、工作原理三、 如何与 QUnDOStack 配合使用四、自

C++使用printf语句实现进制转换的示例代码

《C++使用printf语句实现进制转换的示例代码》在C语言中,printf函数可以直接实现部分进制转换功能,通过格式说明符(formatspecifier)快速输出不同进制的数值,下面给大家分享C+... 目录一、printf 原生支持的进制转换1. 十进制、八进制、十六进制转换2. 显示进制前缀3. 指

使用Python构建一个Hexo博客发布工具

《使用Python构建一个Hexo博客发布工具》虽然Hexo的命令行工具非常强大,但对于日常的博客撰写和发布过程,我总觉得缺少一个直观的图形界面来简化操作,下面我们就来看看如何使用Python构建一个... 目录引言Hexo博客系统简介设计需求技术选择代码实现主框架界面设计核心功能实现1. 发布文章2. 加

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

shell编程之函数与数组的使用详解

《shell编程之函数与数组的使用详解》:本文主要介绍shell编程之函数与数组的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录shell函数函数的用法俩个数求和系统资源监控并报警函数函数变量的作用范围函数的参数递归函数shell数组获取数组的长度读取某下的