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

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

news 2025/11/6 19:18: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

Python爬虫实战：研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

编程新知 2025/10/10 18:13:55

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园二、准备工作 1. 编译环境宿主机：Ubuntu 20.04.6 LTSHost：ARM32位交叉编译器：arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链在交叉编译之前&#x…...

编程新知 2025/8/5 22:19:11

Lombok 的 @Data 注解失效，未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误，它们的含义、原因和解决方法都有显著区别。以下是详细对比： 1. HTTP 406 (Not Acceptable) 含义： 客户端请求的内容类型与服务器支持的内容类型不匹…...

编程新知 2025/11/4 20:42:19

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载在Kubernetes（简称K8s）中，Ingress是一个API对象，它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress，你可…...

编程新知 2025/9/7 0:12:53

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

编程新知 2025/8/4 2:45:15

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型项目截图项目简介社会医疗保险是国家通过立法形式强制实施，由雇主和个人按一定比例缴纳保险费，建立社会医疗保险基金，支付雇员医疗费用的一种医疗保险制度， 它是促进社会文明和进步的…...

编程新知 2025/11/2 23:16:47

什么是EULA和DPA

文章目录 EULA（End User License Agreement）DPA（Data Protection Agreement）一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA（End User License Agreement） 定义： EULA即…...

编程新知 2025/10/18 7:13:10

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码我们将以 fmt 这个流行的格式化库为例，演示如何：使用 FetchContent 从 GitH…...

编程新知 2025/10/30 5:11:46

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持，不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

编程新知 2025/10/24 5:00:32

OpenLayers 分屏对比(地图联动)

注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能，和卷帘图层不一样的是，分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

编程新知 2025/9/30 5:23:30

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`