当前位置：首页 > news >正文

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

news 2026/1/1 22:54:30

🚀 个人简介：某大型国企资深软件研发工程师，信息系统项目管理师、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地图与大数据可视化

📚 常用组件库与实用工具

💡 java入门到实战

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

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

编程日记 2024/9/23 18:00:35

aws 容器镜像仓库操作

aws 容器镜像仓库产品叫ECR，官方文档参考：Amazon Elastic Container Registry。 1）账号认证 # 配置aws命令 $ aws configure set aws_access_key_id ${ak} $ aws configure set aws_secret_access_key ${sk} 2）镜像仓库登陆 #…...

编程日记 2024/9/23 17:59:34

学习记录：js算法（四十一）：基于时间的键值存储

文章目录基于时间的键值存储网上思路总结基于时间的键值存储设计一个基于时间的键值数据结构，该结构可以在不同时间戳存储对应同一个键的多个值，并针对特定时间戳检索键对应的值。实现 TimeMap 类： TimeMap() 初始化数据结构对象void se…...

编程日记 2024/9/23 17:54:28

C语言 | Leetcode C语言题解之第424题替换后的最长重复字符

题目： 题解： int characterReplacement(char* s, int k) {int num[26];memset(num, 0, sizeof(num));int n strlen(s);int maxn 0;int left 0, right 0;while (right < n) {num[s[right] - A];maxn fmax(maxn, num[s[right] - A]);if (right - …...

编程日记 2024/9/23 17:53:26

大数据时代的PDF解析：技术与挑战

在大数据时代，海量信息以不同格式存储，其中 PDF 文件凭借其广泛应用成为了各种业务场景下的主要文档格式。无论是政府文件、企业报告，还是学术论文和技术文档，PDF 都是信息交流的重要媒介。然而，随着信息的爆炸式增长&…...

编程日记 2024/9/23 17:51:24

《nmap 命令全解析：网络探测与安全扫描的利器》

文章目录一、引言二、nmap 命令概述三、nmap 基本用法（一）安装 nmap（二）简单扫描示例四、nmap 常见参数（一）-sS（TCP SYN 扫描）（二）-sT（TCP 连接…...

编程日记 2024/9/23 17:50:23

2024年华为OD机试真题-斗地主之顺子-Python-OD统一考试（E卷）

最新华为OD机试考点合集：华为OD机试2024年真题题库（E卷+D卷+C卷）_华为od机试题库-CSDN博客每一题都含有详细的解题思路和代码注释，精选c++、JAVA、Python三种语言解法。帮助每一位考生轻松、高效刷题。订阅后永久可看，持续跟新。题目描述在斗地主只扑克牌游戏中，…...

编程日记 2024/9/23 17:49:22

亲测有效，长期有效的RTSP流地址公网RTSP地址，各种类型的视频源

我们经常需要做一些实时视频流的测试，但是手边又没有办法及时弄到一个摄像机，我们经常会去搜索一下“公网RTSP地址”，但是大部分现在都失效了，有什么办法能够让我们快速构建一个RTSP流，点几下就能直接用？ …...

编程日记 2024/9/23 17:47:20

Excel常用函数大全

Excel常用函数介绍与示例应用在Excel中，函数是进行数据处理和分析的强大工具。对于新手来说，掌握一些基本的函数使用方法能够大大提升工作效率。以下是一份通俗易懂、适合新手的Excel函数使用方法总结： 1. 求和函数（SUM&#x…...

编程日记 2024/9/23 17:45:16

领夹麦克风哪个品牌好，无线领夹麦克风品牌排名，麦克风品牌大全

无线领夹麦克风因其便携性和隐蔽性，越来越受到演讲者和表演者的青睐。但是，随着市场上品牌和型号的增多，质量也变得参差不齐。许多用户在选购时，会因为缺乏了解而选择到性能不佳的产品，影响声音的清晰度和稳定性。下面…...

编程日记 2024/9/23 17:43:14

【C语言零基础入门篇 - 15】：单链表

文章目录单链表链表的基本概念单链表功能的实现单链表的初始化单链表新结点的创建单链表头插法单链表的输出单链表的查找单链表修改单链表的删除单链表所有数据结点释放源代码单链表链表的基本概念一、什么是链表？ 链表是数据结构中线性表的一种，其…...

编程日记 2024/9/23 17:40:11

Linux主流Web服务器：你选择哪一款？

在Linux环境下，选择Web服务器通常取决于特定需求、资源限制、以及对性能的期望。以下是对几款主流Linux Web服务器的详细分析： 1. Apache HTTP Server - 特点：Apache是功能最全面的Web服务器之一，支持模块化架构，拥…...

编程日记 2024/9/23 17:39:10

光耦知识分享：解读晶体管光耦主要性能指标

晶体管光耦是一种常用的光电耦合器，用于隔离和传输电信号，它包含有光电发射管和接收晶体管两个主要部分。解读晶体管光耦的主要指标有助于了解其性能和应用范围，主要指标包括： 最大工作电压（V_R_MAX）&…...

编程日记 2024/9/23 17:38:09

laravel public 目录获取

在Laravel框架中，public目录是用来存放公共资源的，如CSS、JS、图片等。你可以通过多种方式获取public目录的路径。方法一：使用helper函数public_path() $path public_path(); 方法二：使用Request类 $path Request::root().…...

编程日记 2024/9/23 17:34:03

强化学习策略买卖股票的效果如何？

Github 项目： GitHub - daocodedao/stable-baselines-stock: 深度强化学习自动炒股主体参考了 https://github.com/wangshub/RL-Stock，修改了一些 requirements 修改到新版本支持 macstable-baselines 改为 stable-baselines3 使用强化学习预测股价…...

编程日记 2024/9/23 17:32:00

Kotlin 基本介绍(一)

导读大纲 1.1.1 Kotlin 是安全的1.1.2 Kotlin 具有互操作性1.1.3 什么是 idiomatic Kotlin？ 1.1.1 Kotlin 是安全的一般来说,当我们说一种编程语言是安全的我们指的是它的设计可以防止程序中出现某些类型的错误当然,这并不是绝对的;没有一种语言能防止所有可能出现…...

编程日记 2024/9/23 17:29:58

Cocos Creator发布Moloco平台试玩广告（PlayableAd）

官方文档主要遇到了两点问题。 1.HTML文件内的body需要注入 <script>window.FBPlayableOnCTAClick () > {(typeof FbPlayableAd undefined) ? alert(FBPlayableAd.onCTAClick) : FbPlayableAd.onCTAClick()}</script> 2.跳转商店使用 window.parent.postM…...

编程日记 2024/9/23 17:27:55

七种修复错误：由于找不到msvcr110.dll 无法继续执行的方法

当你在运行某些程序时遇到“找不到msvcr110.dll”的错误提示，这通常意味着你的系统缺少了Microsoft Visual C 2012 Redistributable包中的一个重要文件。这个DLL文件是Microsoft Visual C Redistributable的一部分，用于支持许多使用Visual C编写的软件和…...

编程日记 2024/9/23 17:26:53

Python模拟鼠标轨迹[Python]

一.鼠标轨迹模拟简介传统的鼠标轨迹模拟依赖于简单的数学模型，如直线或曲线路径。然而，这种方法难以捕捉到人类操作的复杂性和多样性。AI大模型的出现，能够通过深度学习技术，学习并模拟更自然的鼠标移动行为。二.鼠标轨迹算法实…...

编程日记 2024/9/23 17:25:52

Ubuntu搭建java开发环境

一：Ubuntu安装 1、下载Ubuntu 24.04.1 LTS 官网下载地址：https://releases.ubuntu.com/24.04.1/ubuntu-24.04.1-desktop-amd64.iso 可以直接点击这里下载 2、使用VMware安装新建虚拟机之后一直下一步，到如下界面，选择刚刚…...

编程日记 2024/9/23 17:24:50

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”，无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。获取access_token: 自定义模版消息： 关注测试号：扫二维码关注测试号。发送模版消息： import requests da…...

编程新知 2025/12/25 2:10:53

Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）

概述在 Swift 开发语言中，各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。不过，在涉及到多个子类派生于基类进行多态模拟的场景下，…...

编程新知 2025/12/18 18:21:12

UDP(Echoserver)

网络命令 Ping 命令检测网络是否连通使用方法: ping -c 次数网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法：netstat [选项] 功能：查看网络状态常用选项： n 拒绝显示别名&#…...

编程新知 2025/12/24 16:48:44

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法，用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理，能够自动确定一个阈值，将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2025/10/11 3:56:08

Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器

第一章引言：语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进在人工智能领域，文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量，支撑着搜索引擎、推荐系统、…...

编程新知 2025/11/6 8:47:31

HBuilderX安装（uni-app和小程序开发）

下载HBuilderX 访问官方网站：https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本： Windows版（推荐下载标准版） Windows系统安装步骤运行安装程序： 双击下载的.exe安装文件如果出现安全提示&…...

编程新知 2025/12/30 12:17:44

大学生职业发展与就业创业指导教学评价

这里是引用作为软工2203/2204班的学生，我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要，而您认真负责的教学态度，让课程的每一部分都充满了实用价值。尤其让我…...

编程新知 2025/11/16 1:39:27

蓝桥杯3498 01串的熵

问题描述对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798， 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

编程新知 2025/12/31 9:33:43

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2025/12/30 13:50:23

AI，如何重构理解、匹配与决策？

AI 时代，我们如何理解消费？ 作者｜王彬封面｜Unplash 人们通过信息理解世界。曾几何时，PC 与移动互联网重塑了人们的购物路径：信息变得唾手可得，商品决策变得高度依赖内容。但 AI 时代的来…...

编程新知 2025/12/30 21:56:50

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、附录

相关文章：

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

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