【JavaScript】详解Day.js:轻量级日期处理库的全面指南

news2024/9/20 18:37:05

文章目录

    • 一、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://www.coloradmin.cn/o/1953481.html

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

相关文章

如何免费实现网站HTTPS访问

在当今数字化的世界中&#xff0c;网络安全问题愈发凸显其重要性。对于网站而言&#xff0c;实现HTTPS访问已经成为提升用户信任度和保障数据安全的重要手段。然而&#xff0c;对于许多小型网站和个人博客来说&#xff0c;购买SSL证书可能是一笔不小的开销。下面将介绍如何免费…

基于微信小程序+SpringBoot+Vue的儿童预防接种预约系统(带1w+文档)

基于微信小程序SpringBootVue的儿童预防接种预约系统(带1w文档) 基于微信小程序SpringBootVue的儿童预防接种预约系统(带1w文档) 开发合适的儿童预防接种预约微信小程序&#xff0c;可以方便管理人员对儿童预防接种预约微信小程序的管理&#xff0c;提高信息管理工作效率及查询…

【数据结构】单链表带头双向循环链表的实现

一、链表的概念及结构 1.链表的概念 概念&#xff1a;链表是一种物理存储结构上非连续、非顺序的存储结构&#xff0c;数据元素的逻辑顺序是通过链表中的指针链接次序实现的 。 2.链表的结构 一般讲的链表包括数据域和指针域&#xff1a; 二、链表的种类 实际中链表的结构…

云HIS系统源码,业务云协同和数据云协同的数字化医院信息系统

云HIS是利用云计算、大数据、物联网、移动互联网等技术&#xff0c;打造的一个安全、便捷、共享、协同的医疗互联网云生态平台。核心功能是业务云协同和数据云协同。云HIS具有可扩展、易共享、易协同、低成本、体验号、更便捷、易维护的优势&#xff0c;重新定义了数字化医院信…

Intel(R) Wireless-AC 9462 WLAN已关闭开不起来的可能原因

最近给老电脑机械师T90重装系统&#xff0c;装好各种驱动之后&#xff0c;发现无线功能开不起来&#xff0c;WLAN已关闭不管怎么操作都开不起来 最后尝试把笔记本的无线网卡重新插了一下就正常了

freertos的学习cubemx版

HAL 库的freertos 1 实时 2 任务->线程 3 移植 CMSIS_V2 V1版本 NVIC配置全部是抢占优先级 第四组 抢占级别有 0-15 编码规则&#xff0c; 变量名 &#xff1a;类型前缀&#xff0c; c - char S - int16_t L - int32_t U - unsigned Uc - uint8_t Us - uint…

sheng的学习笔记-AI-公式-指数加权移动平均(EWMA)

AI目录&#xff1a;sheng的学习笔记-AI目录-CSDN博客 基础知识 指数加权移动平均&#xff08;Exponential Weighted Moving Average&#xff09;&#xff0c;是一种常用的序列处理方式 看例子&#xff0c;首先这是一年365天的温度散点图&#xff0c;以天数为横坐标&#xff0…

C++进阶(9)C++11

个人主页&#xff1a;仍有未知等待探索-CSDN博客 专题分栏&#xff1a;C 目录 一、统一列表初始化 二、变量类型推导 1、auto 2、decltype 3、typeid 三、左值/右值 1、左值引用/右值引用&#xff08;粗&#xff09; 2、右值 3、右值引用&#xff08;细&#xff09; 1…

135.分发糖果,遍历方向+candy选取的详解

力扣135分发糖果 题目思路代码 题目 https://leetcode.cn/problems/candy/description/ 老师想给孩子们分发糖果&#xff0c;有 N 个孩子站成了一条直线&#xff0c;老师会根据每个孩子的表现&#xff0c;预先给他们评分。 你需要按照以下要求&#xff0c;帮助老师给这些孩子…

【Python机器学习】朴素贝叶斯——使用Python进行文本分类

目录 准备文本&#xff1a;从文本中构建词向量 训练算法&#xff1a;从词向量计算概率 测试算法&#xff1a;根据现实情况修改分类器 准备数据&#xff1a;文档词袋模型 要从文本中获取特征&#xff0c;需要先拆分文本。这里的特征是来自文本的词条&#xff0c;一个词条是字…

大脑网络交互分析:公式与应用

大脑网络交互分析&#xff1a;公式与应用 核心概念与重要性 大脑网络交互分析是神经科学研究中的重要领域&#xff0c;它关注大脑不同区域之间的连接与交互方式。通过分析大脑网络&#xff0c;我们可以理解大脑如何处理和整合信息&#xff0c;进而揭示认知、情感和行为的神经…

java 集合框架-map(键值对集合)

一、Map接口 (键值对集合) 1.实现类 (1).线程不安全 HashMap 1.特点: ①无序 ②查找效率高&#xff1a;根据key&#xff0c;查找value 2.数据结构&#xff1a;数组&#xff08;哈希表&#xff09; 链表&#xff08;链地址法解决哈希表冲突&#xff09; 红黑树&#xff0…

UDP的报文结构及其注意事项

1. 概述 UDP&#xff08;User Datagram Protocol&#xff09;是一种无连接的传输层协议&#xff0c;它提供了一种简单的数据传输服务&#xff0c;不保证数据的可靠传输。在网络通信中&#xff0c;UDP通常用于一些对实时性要求较高、数据量较小、传输延迟较低的应用&#xff0c…

大数据的数据质量有效提升的研究

大数据的数据质量有效提升是一个涉及多个环节和维度的复杂过程。以下是从数据采集、处理、管理到应用等方面&#xff0c;对大数据数据质量有效提升的研究概述&#xff1a; 一、数据采集阶段 明确采集需求&#xff1a;在数据采集前&#xff0c;需明确数据需求&#xff0c;包括…

Mike21粒子追踪模型particle tracking如何展示粒子轨迹

前言&#xff1a; 随着模型的推广&#xff0c;模型的很多模块也问的多了起来&#xff0c;PT粒子追踪模块最近群友也在问&#xff0c;结果算了出来&#xff0c;却实现不了展示运动轨迹。今天就写段简单的PT后处理的方法吧。 注意&#xff1a;MIKE21输出模块中不但输出了关于水…

3个管人绝招,让下属心服口服

管人不能瞎管&#xff0c;手段很重要&#xff1a;3个管人绝招&#xff0c;让下属心服口服 一&#xff1a;差异化管理&#xff0c;玩弄人性 谁赞成&#xff0c;谁反对&#xff0c;看清楚谁顺从自己&#xff0c;谁反对自己之后&#xff0c;接下来要做的便是区别对待。 给听话的…

简单的CSS样式

样式分为三种 内部样式&#xff1a;写在html文件里的样式叫内部样式 内联样式&#xff1a;写在需要的标签中 外部样式&#xff1a;写在外部css文件里 可以通过不同的选择器来选择设置指定组件的样式&#xff1a; <style>/* 写在html文件里的样式叫内部样式 *//* 选择器 *…

PEFT LoRA 介绍(LoRA微调使用的参数及方法)

一 PEFT LoRA 介绍 官网简介如下图&#xff1a; 翻译过来是&#xff1a;低秩自适应(LoRA)是一种PEFT方法&#xff0c;它将一个大矩阵在注意层分解成两个较小的低秩矩阵。这大大减少了需要微调的参数数量。 说的只是针对注意力层&#xff0c;其实我自己平时微调操作注意力层多…

一款功能强大的视频编辑软件会声会影2023

会声会影2023是一款功能强大的视频编辑软件&#xff0c;由加拿大Corel公司制作&#xff0c;正版英文名称为‌Corel VideoStudio。它具备图像抓取和编修功能&#xff0c;可以处理和转换多种视频格式&#xff0c;如‌MV、‌DV、‌V8、‌TV和实时记录抓取画面文件。会声会影提供了…