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(),如下:

 

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

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

相关文章

springboot+vue+uniapp微信小程序的社区团购系统 含商家

传统的商品交易模式受到时间和空间的限制,各种缺陷开始出现,已经不能适应现代互联网时代的需要。移动互联网与智能手机技术为人们生活带来了极大的便捷,通过移动互联网用户可以随时随地的获取信息,或者是享受到一些服务,比如在家中就可以购买商品,在外可以搜索周边商家的商品信…

浅谈密码学

文章目录 每日一句正能量前言什么是密码学对称加密简述加密语法Kerckhoffs原则常用的加密算法现代密码学的原则威胁模型&#xff08;按强度增加的顺序&#xff09; 密码学的应用领域后记 每日一句正能量 人生在世&#xff0c;谁也不能做到让任何人都喜欢&#xff0c;所以没必要…

洛谷P5738 歌唱比赛 题解

#题外话&#xff08;第37篇题解&#xff09;&#xff08;本题为普及-难度&#xff09; #先看题目 题目链接https://www.luogu.com.cn/problem/P5738 #思路&#xff08;好像和P5726-打分有点像&#xff0c;参考一下&#xff09; #代码 #include <bits/stdc.h> using na…

【Java】RestClient的使用

RestClient的使用 先导入Maven坐标&#xff0c;要和elasticsearch和kibana的版本保持一致 <dependency><groupId>org.elasticsearch.client</groupId><artifactId>elasticsearch-rest-high-level-client</artifactId><version>7.12.1<…

AR智能眼镜主板硬件设计_AR眼镜光学方案

AR眼镜凭借其通过导航、游戏、聊天、翻译、音乐、电影和拍照等交互方式&#xff0c;将现实与虚拟进行无缝融合的特点&#xff0c;实现了更加沉浸式的体验。然而&#xff0c;要让AR眼镜真正成为便捷实用的智能设备&#xff0c;需要解决一系列技术难题&#xff0c;如显示、散热、…

【笔记】【开发方案】APN 配置参数 bitmask 数据转换(Android KaiOS)

一、参数说明 &#xff08;一&#xff09;APN配置结构对比 平台AndroidKaiOS文件类型xmljson结构每个<apn>标签是一条APN&#xff0c;包含完成的信息层级数组结构&#xff0c;使用JSON格式的数据。最外层是mcc&#xff0c;其次mnc&#xff0c;最后APN用数组形式配置&am…

​LeetCode解法汇总2583. 二叉树中的第 K 大层和

目录链接&#xff1a; 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目&#xff1a; https://github.com/September26/java-algorithms 原题链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 描述&#xff1a; 给你一棵二叉树的根节点 root 和一个正整…

利用R语言进行聚类分析实战(数据+代码+可视化+详细分析)

&#x1f349;CSDN小墨&晓末:https://blog.csdn.net/jd1813346972 个人介绍: 研一&#xff5c;统计学&#xff5c;干货分享          擅长Python、Matlab、R等主流编程软件          累计十余项国家级比赛奖项&#xff0c;参与研究经费10w、40w级横向 文…

mybatis中foreach批量插入并返回主键

背景 批量插入多条数据,插入成功之后每条数据中需要返回自增主键.处理办法 1.确定项目中mybatis版本,要求3.3.1以上. 查看springboot中项目版本方法: pom.xml中进入依赖(Ctrl点击进入): <dependency><groupId>org.mybatis.spring.boot</groupId><artifac…

性能优化——canvas 加载海量图

背景 公司的在线设计稿平台的画板列表页开发时由于数据量不足&#xff0c;未能测出关于画板列表页性能问题&#xff0c;在经过用户一段时间的使用后出现了关于初始化卡顿、缩放卡顿等问题&#xff0c;画板列表页采用了vue-konva 原因 关于画板列表为何卡顿有如下几点原因 1、…

C# 1.消息队列MQ使用场景--图文解析

为什么使用消息队列MQ&#xff08;Message Queue&#xff09;&#xff1f; 消息队列有什么优点和缺点&#xff1f; Kafka(大数据日志采集)、ActiveMQ(最早的MQ--目前使用较少)、RabbitMQ(开源&#xff0c;中小型企业使用足够)、RocketMQ(阿里开发&#xff0c;大型企业适用) 都…

【知识整理】Git Commit Message 规范

一. 概述 前面咱们整理过 Code Review 一文&#xff0c;提到了 Review 的重要性&#xff0c;已经同过gitlab进行CodeReview 的方式&#xff0c;那么本文详细说明一下对CodeReivew非常重要的Git Commit Message 规范。 我们在每次提交代码时&#xff0c;都需要编写 Commit Mes…

【计网】TCP的三次握手四次挥手

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;JAVA ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 三次握手&#xff08;Connection Establishment&#xff09; 四次挥手&#xff08;Connection Termination&#xff09; 结语 我…

AI工具新革命:从ChatGPT到Sora,生成式AI改变世界

这个春节着实精彩&#xff0c;“春山学”吃透了&#xff0c;不如把目光移向OpenAI又一重磅产品——文生视频大模型Sora。智能新纪元已然开启&#xff0c;因为正如周鸿祎所说&#xff1a;“,Sora的诞生意味着AGI&#xff08;通用人工智能&#xff09;的实现将从10年缩短到1年。”…

二十五、二维直方图

项目功能实现&#xff1a;对一张彩色图像进行二维直方图绘制 二维直方图通常在HSV色域空间进行处理 按照之前的博文结构来&#xff0c;这里就不在赘述了 一、头文件 histogram_2d.h #pragma once#include<opencv2/opencv.hpp>using namespace cv;class HISTOGRAM2D { …

Dynamo批量将房间名称转换为模型文字

今天呢&#xff0c;我们简单聊聊如何把房间名称&#xff0c;变成模型文字&#xff0c;好在三维中能够看到房间名称。 本来吧&#xff0c;我觉得批量创建模型文字应该是个很简单的事&#xff0c;但是我在Dynamo中搜了下ModelText&#xff0c;发现只有一个在族环境中创建模型文字…

实习日志30

概要 高拍仪硬件通信原理&#xff0c;WebSocket源码解析&#xff08;JavaScript&#xff09; WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 WebSocket 使得客户端和服务器之间的数据交换变得更加简单&#xff0c;允许服务端主动向客户端推送数据…

07 MyBatis之高级映射 + 懒加载(延迟加载)+缓存

1. 高级映射 例如有两张表, 分别为班级表和学生表 自然, 一个班级对应多个学生 像这种数据 , 应该如果如何映射到Java的实体类上呢? 这就是高级映射解决的问题 以班级和学生为例子 , 因为一个班级对应多个学生 , 因此学生表中必定有一个班级编号字段cid 但我们在学生的实体…

5G网络(接入网+承载网+核心网)

5G网络&#xff08;接入网承载网核心网&#xff09; 一、5G网络全网架构图 这张图分为左右两部分&#xff0c;右边为无线侧网络架构&#xff0c;左边为固定侧网络架构。 无线侧&#xff1a;手机或者集团客户通过基站接入到无线接入网&#xff0c;在接入网侧可以通过RTN或者IP…

【BUG】解决java.util.Date and java.lang.String

报错解析与解决方案&#xff1a;Java中处理Date类型与String比较引发的IllegalArgumentException 前言 在日常的开发过程中&#xff0c;我们可能会遇到各种类型转换和比较相关的异常。今天&#xff0c;我在调用接口时就遭遇了这样一个问题&#xff1a; 错误描述 在执行SQL查…