【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


在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

Qt背景与环境搭建

目录 ​编辑 一、Qt背景 1.行业岗位介绍 2.什么是Qt 3.Qt的发展史 4.Qt支持的平台 5.Qt的版本和优点 5.1 版本 5.2 优点 6.Qt的应用场景 7.Qt 的成功案例 8.Qt 发展前景 二、环境搭建 1.Qt 的开发工具概述 2.Qt SDK 的下载和安装 2.1 Qt SDK 的下载 ​编辑 2…

Ascend算子开发

Device侧 1. 存储API 1.1 GlobalTensor 1.2 LocalTensor 可获取、设置值、获取大小。页可以通过[]获取 1.3 数据类型 2. Add样例 数据搬入&#xff1a;DataCopy调用计算接口&#xff1a;Add数据搬出&#xff1a;LocalTensor、EnQue、DeQue 2.1 核函数定义 x、y输入&#xff…

『 Linux 』线程概念

文章目录 什么是线程执行流线程与进程的关系页表构造及线程资源分配线程的轻量化线程的特点 什么是线程 线程本质上是进程的一个执行分支,用于处理进程中的代码和数据; 每个线程都可以执行独立不同的代码片段,这意味着在一个进程中可以同时执行多个任务; 同一个进程中的所有线程…

基于微信小程序+SpringBoot+Vue的社区超市管理系统(带1w+文档)

基于微信小程序SpringBootVue的社区超市管理系统(带1w文档) 基于微信小程序SpringBootVue的社区超市管理系统(带1w文档) 为了让商品信息的管理模式进行升级&#xff0c;也为了更好的维护商品信息&#xff0c;社区超市管理系统的开发运用就显得很有必要&#xff0c;因为它不仅可…

全球奈拉滨市场规模预测:未来六年年复合增长率CAGR为1.1%

据恒州诚思研究&#xff0c;2023年全球奈拉滨市场规模大约为3.8亿元&#xff0c;预计未来六年年复合增长率CAGR为1.1%&#xff0c;到2030年市场规模将接近4.2亿元。这一增长反映了奈拉滨在全球医药行业中的重要性及其在未来发展中的潜在机会。随着科学的进一步发展和市场的扩展…

全网最详细Gradio教程系列5——Gradio Client: curl

全网最详细Gradio教程系列5——Gradio Client: curl 前言本篇摘要5. Gradio Client的三种使用方式5.3 Curl查询Gradio Apps5.3.1 安装5.3.2 获取Gradio程序的URL5.3.3 HF_TOKEN和身份认证1. POST/GET示例2. 整合命令&#xff1a;awk和read3. HF_TOKEN4. 身份认证 5.3.4 POST&am…

21 Python常用内置函数——zip()

zip() 函数用来把多个可迭代对象中的元素压缩到一起&#xff0c;返回一个可迭代的 zip 对象&#xff0c;其中每个元素都是包含原来的多个可迭代对象对应位置上元素的元组&#xff0c;最终结果中包含的元素个数取决于所有参数序列或可迭代对象中最短的那个。 可以这样理解这个函…

WPF启动失败报System.Windows.Automation.Peers.AutomationPeer.Initialize()错误解决

问题描述 win10系统上WPF程序启动后就崩溃&#xff0c;通过查看崩溃日志如下&#xff1a; 应用程序: xxx.exe Framework 版本: v4.0.30319 说明: 由于未经处理的异常&#xff0c;进程终止。 异常信息: System.TypeLoadException 在 System.Windows.Automation.Peers.Automatio…

强者具备的三个思维

强者具备的三个思维&#xff0c;看看你占了几条&#xff1f; 一、不看自己需要什么&#xff0c;而是看环境和别人需要什么。满足他们&#xff0c;你就能把事情做成。 二、不追求稳定&#xff0c;而是享受不稳定。稳定的工作和生活&#xff0c;并不意味着你的技能已经娴熟。而…

SpringBoot上传超大文件导致Cannot read more than 2,147,483,647 into a byte array,问题解决办法

问题描述 报错: java.lang.IllegalArgumentException: Cannot read more than 2,147,483,647 into a byte array at org.apache.commons.io.IOUtils.lambda$toByteArray$0(IOUtils.java:2403) ~[commons-io-2.11.0.jar:2.11.0] at org.apache.commons.io.output.Thre…

C++学习日记 | LAB 10 运算符重载与友元函数

资料来源&#xff1a;南科大 于仕琪 C/C Program Design LINK&#xff1a;CPP/week10 at main ShiqiYu/CPP GitHub 一、本节内容 本节首先以一个例子具体演示和回顾操作符重载、友元函数以及重载<<操作符。习题部分则为各种运算符重载以及输入输出重载 1.1 Operator o…

支持向量机回归及其应用(附Python 案例代码)

使用支持向量机回归估计房价 让我们看看如何使用支持向量机&#xff08;SVM&#xff09;的概念构建一个回归器来估计房价。我们将使用sklearn中提供的数据集&#xff0c;其中每个数据点由13个属性定义。我们的目标是根据这些属性估计房价。 引言 支持向量回归&#xff08;SV…

WHAT - 一个 Github 仓库的 License 如何解读

目录 一、背景二、解读许可证说明的作用常见的开源许可证类型使用他人代码仓库时需要注意的事项结论 实践作为开发者1. 选择许可证类型2. 在 README 文件中编写许可证信息 作为使用者1. 确定权限2. 了解和遵守条款 总结 一、背景 我们经常在一些 Github 仓库里看到 License 部…

Cache 替换策略--PLRU算法详解

一、引言 LRU&#xff08;Least Recently Used&#xff09;是 cache 的经典替换策略之一&#xff0c;但当 Cache 的路数比较大时&#xff08;多路组相连结构&#xff09;&#xff0c;实现 LRU 的硬件开销就会变得很大。现代处理器一般会考虑使用 PLRU&#xff08;pseudo-LRU&a…

Vue.js 2 项目实战(八):小黑记事本组件版

前言 Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它的设计初衷是通过采用简洁且强大的结构&#xff0c;使前端开发变得更简单和高效。以下是对 Vue.js 的详细介绍&#xff1a; 核心特性 声明式渲染 Vue.js 使用声明式语法来描述用户界面&#xff0c;通过数据绑…

用Swagger进行后端接口测试的实战操作

目录 一.什么是Swagger&#xff1f; 二.Swagger的使用操作流程&#xff1a; 1.在pom.xml配置文件导入 Knife4j 的依赖&#xff1a; 2.在config配置类中加入 Knife4j 的相关配置并设置静态资源映射&#xff08;否则接口文档无法访问&#xff09;&#xff1a; 三.Swagger的四个…

xctf--debug

第一眼看着给我吓了一跳 我还以为是什么很牛逼壳 结果就是dnspy打开 这个函数什么ID都没有 只能一个一个点 但是逻辑真的很清晰 之前BUU写的题太复杂了,感觉可以看看这些题静下心 这个时候看着 攻防世界逆向高手题之debug_攻防世界debug-CSDN博客 这个博主的(我好多东西…

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 亲子游戏(200分) - 三语言AC题解(Python/Java/Cpp)

🍭 大家好这里是清隆学长 ,一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 💻 ACM银牌🥈| 多次AK大厂笔试 | 编程一对一辅导 👏 感谢大家的订阅➕ 和 喜欢💗 🍿 最新华为OD机试D卷目录,全、新、准,题目覆盖率达 95% 以上,支持题目在线…

【轨物方案】电气设备数字档案解决方案

需求痛点 传统的电气设备铭牌只能显示固定的名称、日期、型号等信息&#xff0c;不能把与设备相关的其他重要信息展现出来&#xff0c;终端用户想要了解设备信息比较困难。尤其像项目资料类的文件查看&#xff0c;更是有很多不便之处&#xff0c;当设备出现问题后&#xff0c;找…

简要了解sql注入

sql注入安全测试中危害 数据库中的数据&#xff0c;对数据库数据进行操作&#xff08;查询、删除等&#xff09;&#xff1b;网站的权限&#xff0c;找到注入点后可后门写入&#xff1b; sql注入产生原理详细分析 可控变量&#xff0c;带入数据库查询&#xff0c;变量未存在…