Day.js时间插件的安装引用与常用方法大全

🚀 个人简介：某大型国企资深软件研发工程师，信息系统项目管理师、CSDN优质创作者、阿里云专家博主，华为云云享专家，分享前端后端相关技术与工作常见问题~

💟 作    者：码喽的自我修养🥰
📝 专    栏：常用组件库与实用工具 🎉

🌈 创作不易，如果能帮助到带大家，欢迎 收藏+关注 哦 💕

​

🌈🌈文章目录 

01、简介 

02、安装

方式一：通过CDN引入Day.js

方式二：通过npm安装Day.js

03、获取当前时间

1、获取当前时间（dayjs对象）：

 2、获取当前时间（原生Date对象）

3、获取当前时间（字符串，年、月、日）

4、获取当前时间（字符串，年、月、日、时、分、秒） 

5、获取时间戳（秒）

6、获取时间戳（毫秒）

04、获取&设置年、月、日、时、分、秒、毫秒

05、时间操作

1、添加

2、开始时间

3、结束时间

4、获取两个日期间的时间差

06、格式化

07、附录

 ​

01、简介 

Day.js 是一个轻量级，易于使用的 JavaScript 日期库，提供了强大的日期和时间处理功能。它具有简洁的 API，支持链式操作和不可变性。Day.js 支持国际化显示和各种格式的日期和时间的解析和格式化。它还提供了丰富的插件系统，可以轻松扩展功能。无论是在 Web 还是 Node.js 环境下，Day.js 都是一个不错的选择

02、安装

方式一：通过CDN引入Day.js

<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.6/dayjs.min.js"></script>

方式二：通过npm安装Day.js

这里以Vue项目为例。

 在Vue项目中引入Day.js的步骤如下：

第一步：通过npm命令安装Day.js。

$ npm install dayjs

第二步：在main.js文件中配置Day.js。

import dayjs from 'dayjs';
Vue.prototype.dayjs = dayjs;

经过如上两步，就可以直接通过this.dayjs()使用Day.js了。比如获取时间戳（秒）：

const time = this.dayjs().unix();

03、获取当前时间

1、获取当前时间（dayjs对象）：

dayjs()

当没有参数时，会返回一个 dayjs 实例对象，且为当前日期和时间。

输出结果：

 

 2、获取当前时间（原生Date对象）

dayjs().toDate()

输出结果：

3、获取当前时间（字符串，年、月、日）

dayjs().format('YYYY-MM-DD')

输出结果：

4、获取当前时间（字符串，年、月、日、时、分、秒） 

dayjs().format('YYYY-MM-DD HH:mm:ss')

输出结果： 

5、获取时间戳（秒）

dayjs().unix()

输出结果：

6、获取时间戳（毫秒）

dayjs().valueOf()

输出结果：

04、获取&设置年、月、日、时、分、秒、毫秒

编写示例时的日期是2024年11月10日10点。

// 年份
dayjs().year() // 输出结果：2024

// 月份
dayjs().month() // 输出结果：10

// 日
dayjs().date() // 输出结果：10

// 时
dayjs().hour() // 输出结果：10

// 分
dayjs().minute() // 输出结果：10

// 秒
dayjs().second() // 输出结果：15

// 毫秒
dayjs().millisecond() // 输出结果：952

说明：

1、以上年、月、日、时、分、秒的方法，没有参数时是获取值，有参数时是设置值。

// 设置年份
dayjs().year(2024)

// 设置月份
dayjs().month(10)

// 设置日
dayjs().date(10)

// 设置时
dayjs().hour(10)

// 设置分
dayjs().minute(10)

// 设置秒
dayjs().second(15)

// 设置毫秒
dayjs().millisecond(952)

 2、获取月份时返回的月份值比实际月份小1，即当前月份为11月时，month()返回的值为10。

05、时间操作

1、添加

Day.js获取一段时间后的时间，时间单位支持年、月、日、时、分、秒、毫秒、周、季度，返回的是 dayjs 对象。例如获取的是7天后的时间：

dayjs().add(7, 'day')

 支持的时间单位如下：

2、开始时间

获取当天的开始时间，返回当天的0点0分0秒：

dayjs().startOf('day')

支持的时间单位如下：

3、结束时间

获取当天的结束时间，返回当天的23点59分59秒999毫秒：

dayjs().endOf('day')

支持的时间单位同获取开始时间。

4、获取两个日期间的时间差

const date1 = dayjs("2022-11-10")
const date2 = dayjs("2022-10-10")
date1.diff(date2, "day") // 输出结果：31

06、格式化

dayjs.format('YYYY-MM-DD HH:mm:ss')

以下是常用的时间格式单位：

 

07、附录

整合了部分常用方法的示例程序：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Day.js常用方法总结</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.6/dayjs.min.js"></script>
  </head>
  <body>
    <script>
      console.log("########## 获取当前时间（返回dayjs对象） ##########");
      console.log(dayjs());
      console.log("########## 获取当前时间（返回原生Date对象） ##########");
      console.log(dayjs().toDate());
      console.log("########## 获取当前时间（年月日时分秒，字符串） ##########");
      console.log(dayjs().format("YYYY-MM-DD HH:mm:ss"));
      console.log("########## 获取当前时间（年月日，字符串） ##########");
      console.log(dayjs().format("YYYY-MM-DD"));
      console.log("########## 获取时间戳 (秒) ##########");
      console.log(dayjs().unix());
      console.log("########## 获取时间戳 (毫秒) ##########");
      console.log(dayjs().valueOf());
      console.log("########## 年 ##########");
      console.log(dayjs().year());
      console.log("########## 月 ##########");
      console.log(dayjs().month());
      console.log("########## 日 ##########");
      console.log(dayjs().date());
      console.log("########## 时 ##########");
      console.log(dayjs().hour());
      console.log("########## 分 ##########");
      console.log(dayjs().minute());
      console.log("########## 秒 ##########");
      console.log(dayjs().second());
      console.log("########## 毫秒 ##########");
      console.log(dayjs().millisecond());
      console.log("########## 在日期的基础上加上7天 ##########");
      console.log(dayjs("2022-11-10").add(7, "day"));
      console.log("########## 获取当天的开始时间，并格式化 ##########");
      console.log(dayjs().startOf("day").format("YYYY-MM-DD HH:mm:ss.SSS"));
      console.log("########## 获取当天的结束时间，并格式化 ##########");
      console.log(dayjs().startOf("day").format("YYYY-MM-DD HH:mm:ss.SSS"));
      console.log("########## 获取两个日期间的时间差 ##########");
      const date1 = dayjs("2022-11-10");
      const date2 = dayjs("2022-10-10");
      console.log(date1.diff(date2, "day"));
    </script>
  </body>
</html>

以上方法其实足够大家日常使用了，如果想要查看更多内容，给大家推荐官网： 

安装 · Day.js

到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易，如果能帮助到大家,希望大家点点收藏+关注~💕 

​

    更多专栏订阅推荐：

🥕 JavaScript深入研究

👍 前端工程搭建
💕 vue从基础到起飞

✈️ HTML5与CSS3

🖼️ JavaScript基础

⭐️ uniapp与微信小程序

📝 前端工作常见问题汇总

✍️ GIS地图与大数据可视化

📚 常用组件库与实用工具

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

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

相关文章

BLE 设备丢包理解

BLE 设备丢包理解

前言 个人邮箱&#xff1a;zhangyixu02gmail.com在学习 BLE 过程中&#xff0c;总能听到 “丢包” 一词&#xff0c;但是我查阅资料又发现&#xff0c;有大佬说&#xff0c;ATT所有命令都是“必达”的&#xff0c;不存在所谓的“丢包”。而且我发现&#xff0c;在宣传 BLE 产品…
阅读更多...
SpringBoot 整合 Caffeine 实现本地缓存

SpringBoot 整合 Caffeine 实现本地缓存

目录 1、Caffeine 简介1.1、Caffeine 简介1.2、对比 Guava cache 的性能主要优化项1.3、常见的缓存淘汰算法1.4、SpringBoot 集成 Caffeine 两种方式 2、SpringBoot 集成 Caffeine 方式一2.1、缓存加载策略2.1.1、手动加载2.1.2、自动加载【Loading Cache】2.1.3、异步加载【As…
阅读更多...
Jboss 低版本JMX Console未授权

Jboss 低版本JMX Console未授权

漏洞描述 此漏洞主要是由于JBoss中/jmx-console/HtmlAdaptor路径对外开放&#xff0c;并且没有任何身份验证机制&#xff0c;导致攻击者可以进⼊到 jmx控制台&#xff0c;并在其中执⾏任何功能 影响范围 Jboss4.x以下 环境搭建 cd vulhub-master/jboss/CVE-2017-7504 doc…
阅读更多...
Java笔试面试题AI答之单元测试JUnit（7）

Java笔试面试题AI答之单元测试JUnit（7）

文章目录 37. 请列举一些JUnit扩展 &#xff1f;1. 参数化测试2. 条件测试执行3. 临时目录4. 时间测试5. 重复测试6. 前置/后置条件7. Mockito8. Spring Test9. JUnit Vintage10. Testcontainers11. 自定义注解和扩展12. 测试监听器&#xff08;TestListener 和 RunListener&am…
阅读更多...
WIFI路由器的套杆天线简谈

WIFI路由器的套杆天线简谈

❝本次推文简单介绍下WIFI路由器的套杆天线。 路由器天线 路由器在这个万物互联的时代&#xff0c;想必大家对其都不陌生。随着科技的发展&#xff0c;常用的路由器上的天线也越来越多&#xff0c;那么问题来了&#xff1a;天线越多&#xff0c;信号越好吗&#xff1f;路由器…
阅读更多...
智谱清影 - CogVideoX-2b-部署与使用

智谱清影 - CogVideoX-2b-部署与使用

&#x1f351;个人主页&#xff1a;Jupiter. &#x1f680; 所属专栏&#xff1a;Linux从入门到进阶 欢迎大家点赞收藏评论&#x1f60a; 目录 体验地址&#xff1a;[丹摩DAMODEL官网](https://www.damodel.com/console/overview) CogVideoX 简介本篇将详细介绍使用丹摩服务器部…
阅读更多...
Codeforces Round 974 (Div. 3)

Codeforces Round 974 (Div. 3)

比赛地址 : Dashboard - Codeforces Round 974 (Div. 3) - Codeforceshttps://codeforces.com/contest/2014 A 模拟 #include<bits/stdc.h> #define IOS ios::sync_with_stdio(0);cin.tie(0);cout.tie(0); using namespace std;#define endl \n typedef long long …
阅读更多...
Qt 模型视图(一):概述

Qt 模型视图(一):概述

文章目录 Qt 模型视图(一):概述1、模型/视图结构基本原理2、模型3、视图4、代理5、简单实例 Qt 模型视图(一):概述 ​ 模型/视图结构是一种将数据存储和界面展示分离的编程方法。模型存储数据&#xff0c;视图组件显示模型中的数据&#xff0c;在视图组件里修改的数据会被自动…
阅读更多...
MySQL练手题--体育馆的人流量(困难)

MySQL练手题--体育馆的人流量(困难)

一、准备工作 Create table If Not Exists Stadium (id int, visit_date DATE NULL, people int); Truncate table Stadium; insert into Stadium (id, visit_date, people) values (1, 2017-01-01, 10); insert into Stadium (id, visit_date, people) values (2, 2017-01-02…
阅读更多...
C++调用C# DLL之踩坑记录

C++调用C# DLL之踩坑记录

C是非托管代码&#xff0c;C#则是托管代码&#xff0c;无法直接调用 CLR的介绍见CLR简介 MSDN提到了两种非托管-托管的交互技术&#xff1a;CLR Interop和COM Interop 后者要将C# 类库注册为COM组件&#xff0c;本文只探讨CLR&#xff0c;要通过C CLR写中间层代码 方式一&…
阅读更多...
软件测试技术之 GPU 单元测试是什么！

软件测试技术之 GPU 单元测试是什么！

1 背景 测试是开发的一个非常重要的方面&#xff0c;可以在很大程度上决定一个应用程序的命运。良好的测试可以在早期捕获导致应用程序崩溃的问题&#xff0c;但较差的测试往往总是导致故障和停机。 单元测试用于测试各个代码组件&#xff0c;并确保代码按照预期的方式工作。单…
阅读更多...
Cesium 绘制可编辑点

Cesium 绘制可编辑点

Cesium Point点 实现可编辑的pointEntity 实体 文章目录 Cesium Point点前言一、使用步骤二、使用方法二、具体实现1. 开始绘制2.绘制事件监听三、 完整代码前言 支持 鼠标按下 拖动修改点，释放修改完成。 一、使用步骤 1、点击 按钮 开始 绘制，单击地图 绘制完成 2、编辑…
阅读更多...
java（3）数组的定义与使用

java（3）数组的定义与使用

目录 1.前言 2.正文 2.1数组的概念 2.2数组的创建与初始化 2.2.1数组的创建 2.2.1数组的静态初始化 2.2.2数组的动态初始化 2.3数组是引用类型 2.3.1引用类型与基本类型区别 2.3.2认识NULL 2.4二维数组 2.5数组的基本运用 2.5.1数组的遍历 2.5.2数组转字符串 2.…
阅读更多...
C#学习笔记（三）Visual Studio安装与使用

C#学习笔记（三）Visual Studio安装与使用

博主刚开始接触C#&#xff0c;本系列为学习记录&#xff0c;如有错误欢迎各位大佬指正&#xff01;期待互相交流&#xff01; 上一篇文章中安装了Visual Studio Code来编写调试C#程序&#xff0c;但是博主的目标是编写带窗口的应用程序&#xff0c;了解之后发现需要安装Visual …
阅读更多...
基于SpringBoot+定时任务实现地图上绘制车辆实时运动轨迹图

基于SpringBoot+定时任务实现地图上绘制车辆实时运动轨迹图

目录 1. 项目结构 2. Maven依赖配置 (pom.xml) 3. 实现后端服务 4. 配置文件 (application.properties) 5. 启动项目 6. 访问页面 实现基于北斗卫星的车辆定位和轨迹图的Maven工程&#xff08;使用模拟数据&#xff09;&#xff0c;我们将使用以下技术&#xff1a; Spri…
阅读更多...
局部凸空间及其在算子空间中的应用之四——归纳极限空间2

局部凸空间及其在算子空间中的应用之四——归纳极限空间2

局部凸空间及其在算子空间中的应用之四——归纳极限空间2 前言一、归纳极限拓扑中极限的含义总结 数学的真理是绝对的&#xff0c;它超越了时间和空间。——约翰冯诺伊曼 前言 在上一篇文章中&#xff0c;我们讨论了归纳极限拓扑的概念和与连续线性算子有关的一个重要结论。认…
阅读更多...
【Qt | QAction】Qt 的 QAction 类介绍

【Qt | QAction】Qt 的 QAction 类介绍

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…
阅读更多...
OSG开发笔记（三十）：OSG加载动力学仿真K模型文件以及测试Demo

OSG开发笔记（三十）：OSG加载动力学仿真K模型文件以及测试Demo

​ 若该文为原创文章&#xff0c;未经允许不得转载 本文章博客地址&#xff1a;https://blog.csdn.net/qq21497936/article/details/142340138 各位读者&#xff0c;知识无穷而人力有穷&#xff0c;要么改需求&#xff0c;要么找专业人士&#xff0c;要么自己研究 长沙红胖子Q…
阅读更多...
【STL】 set 与 multiset：基础、操作与应用

【STL】 set 与 multiset：基础、操作与应用

在 C 标准库中&#xff0c;set 和 multiset 是两个非常常见的关联容器&#xff0c;主要用于存储和管理具有一定规则的数据集合。本文将详细讲解如何使用这两个容器&#xff0c;并结合实例代码&#xff0c;分析其操作和特性。 0.基础操作概览 0.1.构造&#xff1a; set<T&…
阅读更多...
解决nginx代理SSE接口的响应没有流式返回

解决nginx代理SSE接口的响应没有流式返回

目录 现象原来的nginx配置解决 现象 前后端分离的项目&#xff0c;前端访问被nginx反向代理的后端SSE接口&#xff0c;预期是流式返回&#xff0c;但经常是很久不响应&#xff0c;一响应全部结果一下子都返回了。查看后端项目的日志&#xff0c;响应其实是流式产生的。推测是n…
阅读更多...
最新文章

Copyright @ 2022~2023