【JavaScript】详解Day.js:轻量级日期处理库的全面指南
文章目录
- 一、Day.js简介
- 1. 什么是Day.js?
- 2. 安装Day.js
- 二、Day.js的基本用法
- 1. 创建日期对象
- 2. 格式化日期
- 3. 解析日期字符串
- 4. 操作日期
- 5. 比较日期
- 三、Day.js的高级功能
- 1. 插件机制
- 2. 国际化支持
- 四、实际应用案例
- 1. 事件倒计时
- 2. 日历应用
在JavaScript开发中,处理日期和时间是一项常见而又复杂的任务。尽管JavaScript内置的
Date
对象提供了基本的日期和时间功能,但其使用起来并不够方便。为了解决这个问题,出现了许多第三方库,Day.js便是其中之一。Day.js是一款轻量级的日期处理库,以其简洁的API和小巧的体积而著称。本文将详细介绍Day.js的基本用法、高级功能和实际应用场景,帮助你在项目中高效地处理日期和时间。
一、Day.js简介
1. 什么是Day.js?
Day.js是一个轻量级的JavaScript日期库,兼具现代API和优秀的性能。它的API设计灵感来自于Moment.js,但相比之下,Day.js的体积更小,仅为2KB左右(压缩后和无依赖),非常适合在前端项目中使用。
2. 安装Day.js
你可以通过npm、yarn或直接使用CDN的方式来安装Day.js:
# 使用npm安装
npm install dayjs# 使用yarn安装
yarn add dayjs
或者直接在HTML文件中引入CDN链接:
<script src="https://unpkg.com/dayjs"></script>
二、Day.js的基本用法
1. 创建日期对象
使用Day.js创建日期对象非常简单,只需调用dayjs()
函数:
const dayjs = require('dayjs'); // 如果使用的是Node.js环境// 当前日期和时间
const now = dayjs();
console.log(now.toString());// 指定日期和时间
const specificDate = dayjs('2023-07-27');
console.log(specificDate.toString());
2. 格式化日期
Day.js提供了丰富的格式化功能,可以将日期对象转换为指定格式的字符串:
const date = dayjs();
console.log(date.format('YYYY-MM-DD')); // 输出:2024-07-27
console.log(date.format('YYYY年MM月DD日')); // 输出:2024年07月27日
console.log(date.format('HH:mm:ss')); // 输出:当前时间的时分秒
3. 解析日期字符串
你可以使用Day.js解析各种格式的日期字符串:
const date1 = dayjs('2024-07-27', 'YYYY-MM-DD');
console.log(date1.toString());const date2 = dayjs('27/07/2024', 'DD/MM/YYYY');
console.log(date2.toString());
4. 操作日期
Day.js支持各种日期操作,例如加减日期、设置日期等:
const date = dayjs();// 加减日期
const nextWeek = date.add(7, 'day');
console.log(nextWeek.format('YYYY-MM-DD'));const lastMonth = date.subtract(1, 'month');
console.log(lastMonth.format('YYYY-MM-DD'));// 设置日期
const setDate = date.set('year', 2025);
console.log(setDate.format('YYYY-MM-DD'));
5. 比较日期
Day.js提供了日期比较的方法,可以方便地进行日期的比较操作:
const date1 = dayjs('2024-07-27');
const date2 = dayjs('2024-08-01');console.log(date1.isBefore(date2)); // 输出:true
console.log(date1.isAfter(date2)); // 输出:false
console.log(date1.isSame(date2)); // 输出:false
三、Day.js的高级功能
1. 插件机制
Day.js具有高度的可扩展性,通过插件机制可以扩展其功能。以下是一些常用插件:
自定义解析和格式化
Day.js可以通过插件支持自定义解析和格式化:
const customParseFormat = require('dayjs/plugin/customParseFormat');
dayjs.extend(customParseFormat);const customDate = dayjs('27-07-2024', 'DD-MM-YYYY');
console.log(customDate.format('YYYY-MM-DD')); // 输出:2024-07-27
处理相对时间
使用relativeTime
插件,可以方便地处理相对时间:
const relativeTime = require('dayjs/plugin/relativeTime');
dayjs.extend(relativeTime);const date = dayjs().subtract(3, 'day');
console.log(date.fromNow()); // 输出:3天前
时间区间操作
duration
插件可以让你方便地进行时间区间的操作:
const duration = require('dayjs/plugin/duration');
dayjs.extend(duration);const dur = dayjs.duration({ hours: 2, minutes: 30 });
console.log(dur.asMinutes()); // 输出:150
2. 国际化支持
Day.js内置了多种语言包,可以方便地切换语言:
const locale = require('dayjs/locale/zh-cn');
dayjs.locale('zh-cn');const date = dayjs();
console.log(date.format('dddd, MMMM D, YYYY')); // 输出中文格式的日期
四、实际应用案例
1. 事件倒计时
利用Day.js可以轻松实现事件倒计时功能:
const eventDate = dayjs('2024-12-31');
const now = dayjs();
const diff = eventDate.diff(now);const duration = dayjs.duration(diff);
console.log(`距离事件还有 ${duration.months()} 个月 ${duration.days()} 天 ${duration.hours()} 小时 ${duration.minutes()} 分钟`);
2. 日历应用
Day.js可以用于构建一个简单的日历应用:
const startOfMonth = dayjs().startOf('month');
const endOfMonth = dayjs().endOf('month');console.log(`本月开始于 ${startOfMonth.format('YYYY-MM-DD')},结束于 ${endOfMonth.format('YYYY-MM-DD')}`);
推荐:JavaScript
相关文章:
【JavaScript】详解Day.js:轻量级日期处理库的全面指南
文章目录 一、Day.js简介1. 什么是Day.js?2. 安装Day.js 二、Day.js的基本用法1. 创建日期对象2. 格式化日期3. 解析日期字符串4. 操作日期5. 比较日期 三、Day.js的高级功能1. 插件机制2. 国际化支持 四、实际应用案例1. 事件倒计时2. 日历应用 在JavaScript开发中…...
AI算法与图像处理 | 吴恩达团队新作!多模态方向
本文来源公众号“AI算法与图像处理”,仅用于学术分享,侵权删,干货满满。 原文链接:吴恩达团队新作!多模态方向 研究评估了先进多模态基础模型在 10 个数据集上的多样本上下文学习,揭示了持续的性能提升。…...
云服务器Ubuntu18.04进行Nginx配置
云服务器镜像版本信息:Ubuntu 18.04 server 64bit,本文记录了在改版本镜像上安装Nginx,并介绍了Nginx配置文件目录,便于后面再次有需求时进行复习。 文章目录 Nginx的安装Nginx配置文件分析 Nginx的安装 1.执行下面命令进行安装…...
SQL labs-SQL注入(四,sqlmap对于post传参方式的注入)
本文仅作为学习参考使用,本文作者对任何使用本文进行渗透攻击破坏不负任何责任。 序言:本文主要讲解基于SQL labs靶场,sqlmap工具进行的post传参方式的SQL注入。 传参方式有两类,一类是直接在url栏内进行url编码后进行的传参&am…...
R包:plot1cell单细胞可视化包
介绍 plot1cell是用于单细胞数据seurat数据对象的可视化包。 安装 ## You might need to install the dependencies below if they are not available in your R library. bioc.packages <- c("biomaRt","GenomeInfoDb","EnsDb.Hsapiens.v86&qu…...
Tent混沌人工蜂群与粒子群混合算法遇到问题,具体问题及解决方案如文。
🏆本文收录于《CSDN问答解惑-专业版》专栏,主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案,希望能够助你一臂之力,帮你早日登顶实现财富自由🚀;同时,欢迎大家关注&&收藏&&订阅!持续更新中,up!up!up!! 问题描述 Tent混沌人工蜂…...
Python文献调研(一)环境搭建
一、安装Python版本 1.点击进入Python官网 Download Python | Python.org 2.根据自己的需求选择python的版本,点击【Download】 3.自定义安装路径,记得勾选Add Python xxx to PATH 这步是自动配置环境变量的,如果忘记勾选,建议…...
URL重写
目录 步骤1 规则语法 Nginx URL重写规则语法 Apache URL重写规则语法 步骤2 规则配置 Apache URL重写规则配置 启用mod_rewrite模块 配置.htaccess文件 编写重写规则 测试重写规则 Nginx URL重写规则配置 配置server或location块 测试重写规则 步骤1 规则语法 Ngin…...
git配置环境变量
一.找到git安装目录 打开此git安装目录下的bin文件,复制此文件路径 二.配置环境变量 2.1 右键点击此电脑的属性栏 2.2 点击高级系统配置 2.3 点击环境变量 2.4 按图中步骤进行配置 三.配置完成 win r 输入cmd打开终端 终端页面中输入 git --version 如图所示…...
vue3编程-import.meta.glob实现动态路由(菜单)
import.meta.glob 是vite提供的批量懒加载组件的方法 本地开发环境: const modules import.meta.glob(../views/**/*.vue)这段代码返回的modules是一个Map: key是vue文件的相对路径,值是一个函数,将函数打印出来,如…...
富唯智能转运机器人:高效、智能、未来的选择
在现代工业中,高效的物流和物料处理是提升生产效率的关键。富唯智能转运机器人,以其卓越的技术和智能化的设计,为各行业提供了完美的解决方案。 产品概述 富唯智能转运机器人搭载ICD系列核心控制器,拥有多种移载平台,…...
跨境电商独立站:Shopify/Wordpress/店匠选哪个?
在面对不断增加的平台运营压力时,不少跨境电商的商家逐渐将注意力转向建立自己的独立站。据《中国跨境出口电商发展报告(2022)》所示,中国拥有的独立站数量在2022年已接近20万个,这表明独立站已成为卖家拓展海外市场的…...
减轻幻觉新SOTA,7B模型自迭代训练效果超越GPT-4,上海AI lab发布
LLMs在回答各种复杂问题时,有时会“胡言乱语”,产生所谓的幻觉。解决这一问题的初始步骤就是创建高质量幻觉数据集训练模型以帮助检测、缓解幻觉。 但现有的幻觉标注数据集,因为领域窄、数量少,加上制作成本高、标注人员水平不一…...
53.最大子数组和,动态规划+贪心解法!!!
力扣53最大子数组和 题目动态规划贪心 题目 给你一个整数数组 nums ,请你找出一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和。 子数组是数组中的一个连续部分。 示例 1: 输入:nums…...
python+vue3+onlyoffice在线文档系统实战20240723笔记,项目界面设计和初步开发
经过之前的学习,已经能够正常打开文档了。 目前为止,我们的代码能够实现: 打开文档编辑文档手动保存自动保存虽然功能依然比较少,但是我们已经基本实现了文档管理最核心的功能,而且我们有个非常大的优势,就是支持多人同时在线协同编辑。 现在我们要开发项目,我们得做基…...
谷粒商城实战笔记-72-商品服务-API-属性分组-获取分类属性分组
文章目录 一,后端接口开发Controller层修改接口接口测试 二,前端开发 这一节的内容是开发获取分类属性分组的接口。 一,后端接口开发 Controller层修改接口 修改AttrGroupController接口。 RequestMapping("/list/{catelogId}")p…...
Vue 自定义指令
文章目录 注册局部注册全局注册 钩子钩子参数应用1、按钮权限验证2、自定义用户行为收集指令3、按钮点击防抖4、输入框自动获取焦点5、输入框自动去空字符串6、文字展示不下时展示提示框 注册 局部注册 export default {setup() {/*...*/},directives: {// 在模板中启用 v-fo…...
【python】python图书管理系统_普通用户+管理员菜单(源码+论文)【独一无二】
👉博__主👈:米码收割机 👉技__能👈:C/Python语言 👉公众号👈:测试开发自动化【获取源码商业合作】 👉荣__誉👈:阿里云博客专家博主、5…...
智能路面裂缝检测:基于YOLO和深度学习的全流程实现
引言 路面裂缝检测是维护道路质量和延长道路寿命的重要手段。传统的检测方法往往费时费力且易受人为因素影响。为了提高检测效率和准确性,本文介绍了一种基于深度学习的路面裂缝检测系统。该系统包括用户界面,利用YOLO(You Only Look Once&a…...
C++ unordered_map
1. unordered系列关联式容器 在C98 中, STL 提供了底层为红黑树结构的一系列关联式容器,在查询时效率可达到 ,即最差情况下需要比较红黑树的高度次,当树中的节点非常多时,查询效率也不理想。最好的查询是,…...
PHP Switch 语句
PHP 中的 switch 语句是一种多路分支语句,它允许一个变量的值对多个代码块进行选择执行。这通常比使用多个 if...elseif...else 语句更清晰、更易于维护。下面将详细介绍 PHP 中 switch 语句的使用方法。 基本语法 switch (n) {case label1:// 如果 n label1&…...
electron 网页TodoList应用打包win桌面软件数据持久化
参考: electron 网页TodoList工具打包成win桌面应用exe https://blog.csdn.net/weixin_42357472/article/details/140648621 electron直接打包exe应用,打开网页上面添加的task在重启后为空,历史没有被保存,需要持久化工具保存之前…...
软件缺陷(Bug)、禅道
目录 软件缺陷的判定标准 软件缺陷的核心内容 构成缺陷的基本要素 缺陷报告 缺陷管理 缺陷的跟踪流程 项目管理工具--禅道 软件在使用过程中存在的任何问题(如:错误、异常等),都叫软件的缺陷,简称bug。 软件缺…...
MySQL客户端命令一节将.sql文件导入MySQL
MySql客户端命令 直接输入SQL语句 使用MySQL客户端连接到服务器之后,可以发送SQL语句到服务器执行,并且以;和\g, \G作为结束不同的结束方式显示内容有所不同** TIPS: ;和\g结尾以表格的形式显示结果\G以行的形式显示结果 在连接到服务器之后…...
[论文笔记] DCA(Dual Chunk Attention)
DCA(Dual Chunk Attention)是一种在自然语言处理模型中用来处理长文本的技术。传统的注意力机制(Attention)在处理长文本时可能会遇到效率和性能瓶颈,因为计算每个单词与其他所有单词之间的关系会随着文本长度的增加而…...
构建查询洞察 UI
本文字数:2631;估计阅读时间:7 分钟 作者:Bucky Schwarz 本文在公众号【ClickHouseInc】首发 我们最近发布了 Query Insights 的初步实现,为 ClickHouse Cloud 用户提供了一种便捷的方法来查看和解释查询日志。该功能对…...
【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第三篇 嵌入式Linux驱动开发篇-第五十九章 等待队列
i.MX8MM处理器采用了先进的14LPCFinFET工艺,提供更快的速度和更高的电源效率;四核Cortex-A53,单核Cortex-M4,多达五个内核 ,主频高达1.8GHz,2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…...
35.【C语言】详解函数递归
目录: 定义 作用 例子1~3 拓展学习 趣味练习 1.定义:函数自己调用自己(递推回归) int main() {main()return 0; } 这样容易死循环,导致爆栈(Stack Overflow) 所以需要设立限制条件,使执行时越来越接近条…...
【机器学习】智驭未来:机器学习如何重塑制造业的转型与升级
📝个人主页🌹:Eternity._ 🌹🌹期待您的关注 🌹🌹 ❀目录 🔍1. 引言📒2. 机器学习重塑制造业生产流程🌸预测性维护:减少停机时间,提高设…...
Python爬虫(5) --爬取网页视频
文章目录 爬虫爬取视频指定url发送请求UA伪装请求页面 获取想要的数据解析定位定位音视频位置 存放视频完整代码实现总结 爬虫 Python 爬虫是一种自动化工具,用于从互联网上抓取网页数据并提取有用的信息。Python 因其简洁的语法和丰富的库支持(如 requ…...
【Unity】关于Luban的简单使用
最近看了下Luban导出Excel数据的方式,来记录下 【Unity】关于Luban的简单使用 安装Luban开始使用UnityLubanC# 扩展 安装Luban Luban文档:https://luban.doc.code-philosophy.com/docs/beginner/quickstart 1.安装dotnet sdk 8.0或更高版本sdk 2.githu…...
企业公户验证API如何使用JAVA、Python、PHP语言进行应用
在纷繁复杂的金融与商业领域,确保每笔交易的安全与合规是至关重要的。而企业公户验证API,正是这样一位默默守护的数字卫士,它通过智能化的手段,简化了企业对公账户验证流程,让繁琐的审核变得快捷且可靠。 什么是企业公…...
杰发科技Bootloader(2)—— 基于7840的Keil配置地址
序 在7840的sample代码里面有一个简单的Boot跳转APP的示例 PFlash地址从0开始 DFlash的地址从1000000开始 Boot解析 他的boot地址配置为0 Boot的代码主要是这几行,主要作用就是Flash的跳转 int main(void) {SystemClock_Config();InitDebug();printf("demo…...
cmd常用命令
在Windows操作系统中,CMD(Command Prompt)是一个强大的命令行工具,允许用户通过键入命令来执行各种系统级操作。以下是一些常用的CMD命令及其功能: 文件与目录管理 dir:显示当前目录下的文件和子目录列表。…...
PCIe 以太网芯片 RTL8125B 的 spec 和 Linux driver 分析备忘
1,下载 RTL8125B driver 下载页: https://www.realtek.com/Download/List?cate_id584 2,RTL8125B datasheet下载 下载页: https://file.elecfans.com/web2/M00/44/D8/poYBAGKHVriAHnfWADAT6T6hjVk715.pdf3, 编译driver 解压: $ tar xj…...
Python tkinter Menu菜单组件详解
好久没有更新了,今天我来领大家熟悉一下Menu组件 1.认识、了解Menu 什么是Menu menu组件是tkinter中的菜单组件,通过该组件,开发者可以为窗口设计菜单和工具栏等。(ttk还提供了treeview树形菜单,python遍历目录的两种…...
谷粒商城实战笔记-46-商品服务-API-三级分类-配置网关路由与路径重写
文章目录 一,准备工作1,新增一级菜单2,新增二级菜单 二,前端树形界面开发1,开发分类展示组件 三,远程调用接口获取商品分类数据1,远程调用2,路由配置 错误记录 本节的主要内容&#…...
简要了解sql注入
sql注入安全测试中危害 数据库中的数据,对数据库数据进行操作(查询、删除等);网站的权限,找到注入点后可后门写入; sql注入产生原理详细分析 可控变量,带入数据库查询,变量未存在…...
Java 扫雷游戏
程序分析 使用Java编写的扫雷游戏界面程序,主要内容总结如下: Frame类继承自JFrame,构建了扫雷游戏的界面。 包含文本框text、标签nowBomb和setBomb、按钮start、面板MenuPamel和bombPanel等组件。通过jbInit方法进行初始化设置,…...
vue3 命令运行窗口暴露网络地址,以及修改端口号
一般情况下这里的地址是隐藏的 这里加上 --host 可以暴露网络地址,再加上--port --8080 就可以将端口号修改为8080(修改后边的数字就可以修改为你想要的端口号)...
由CANoe自带协议栈在TCP断开连接时同时发送两条FIN报文引起的注意事项
在我写这篇文章CAPL如何在底层模拟TCP Server端断开TCP连接时,我发现了一个奇怪的现象。我为了使用CAPL组装报文的方式实现TCP Server断开连接的过程,插入一个网络节点作为Client端。为了让Client能够发起连接和发起断开连接,给网络节点配置了独立的TCP/IP Stack,也就是CAN…...
FastGPT部署和接入使用重排模型bce-reranker-base
bce-reranker简介 bce-reranker 是一种专门用于信息检索和自然语言处理领域中的重排序(reranking)模型。这种模型由北京智源人工智能研究院(BAAI)开发,是 BGE(BAAI General Embedding)系列的一部分。BGE 系列模型专注于提供通用的嵌入表示,而 bce-reranker 则更进一步…...
Android笔试面试题AI答之线程Handler、Thread(2)
答案仅供参考,来自 讯飞星火大模型 目录 1.Android多线程间通信和多进程之间通信有什么不同,分别怎么实现?2.请解释下在单线程模型中Message、Handler、Message Queue、Looper之间的关系?3.Android 线程间通信有哪几种方式?4.子线程发消息…...
某某物联rabbitmqhttp二轮充电桩协议充电协议对接
对接方式概述: 1)请求采用 http 协议方式,推送数据采用 amqp(默认 rabbitmq)点对点消息队 列方式。 2)消息队列连接信息,需贵方完善。 1 hostIp: 2 virtualHost: 3 userName: 4 pass…...
黑马JavaWeb企业级开发(知识清单)03——HTML实现正文:排版(音视频、换行、段落)、布局标签(div、span)、盒子模型
文章目录 前言一、正文排版1. 视频标签: < video >2. 音频标签: < audio >3. 换行标签: < br >4. 段落标签 < p >5. vscode实现 二、布局1. 盒子模型2. 布局标签< div >和< span >3. VScode实现 三、源代码和运行结果总结 前言 本篇文章是…...
Java | Leetcode Java题解之第283题移动零
题目: 题解: class Solution {public void moveZeroes(int[] nums) {int n nums.length, left 0, right 0;while (right < n) {if (nums[right] ! 0) {swap(nums, left, right);left;}right;}}public void swap(int[] nums, int left, int right)…...
Django REST Framework(十三)视图集-GenericViewSet
Django REST Framework 中,ModelViewSet 和 ReadOnlyModelViewSet 提供了快速实现常见视图操作的便捷方法。它们分别继承自 GenericViewSet 并组合了多个 Mixin 类,使得视图的编写变得更加简单。 ModelViewSet ModelViewSet 继承自 GenericViewSet&…...
《0基础》学习Python——第二十四讲__爬虫/<7>深度爬取
一、深度爬取 深度爬取是指在网络爬虫中,获取网页上的所有链接并递归地访问这些链接,以获取更深层次的页面数据。 通常,一个简单的爬虫只会获取到初始页面上的链接,并不会进一步访问这些链接上的其他页面。而深度爬取则会不断地获…...
Python Pygame制作简单五子棋游戏
代码参考自:https://blog.csdn.net/weixin_43918046/article/details/119521845 新增功能:1任意棋盘大小;2.任意棋子连线 # 棋盘大小 [670, 670] # 棋盘行列 15*15 import pygame from pygame.locals import QUIT, KEYDOWN import numpy as…...
JS+H5在线文心AI聊天(第三方接口)
源码在最后面 调用的不是文心官方接口 可以正常聊天 有打字动画 效果图 源代码 <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-s…...