【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://www.mzph.cn/diannao/51233.shtml

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

相关文章

Python | ValueError: could not convert string to float: ‘example’

Python | ValueError: could not convert string to float: ‘example’ 在Python编程中&#xff0c;类型转换是一个常见的操作。然而&#xff0c;当尝试将一个字符串转换为浮点数时&#xff0c;如果字符串的内容不是有效的浮点数表示&#xff0c;就会遇到“ValueError: could…

labview四字节转浮点数

1.labview四字节转浮点数 2.Labview怎么把串口接收到的数据转换成浮点数&#xff1f; Labview怎么把串口接收到的数据转换成浮点数&#xff1f;

如何跨越 LangChain 应用研发的最后一公里

说 [LangChain] 是现在最流行的 AI 应用开发框架&#xff0c;应该没有人出来反对吧。LangChain 的出现极大地简化了基于大型语言模型&#xff08;LLM&#xff09;的 AI 应用构建难度&#xff0c;如果把 AI 应用比作一个人的话&#xff0c;那么 LLM 相当于这个人的“大脑”&…

基于vue-grid-layout插件(vue版本)实现增删改查/拖拽自动排序等功能(已验证、可正常运行)

前端时间有个需求&#xff0c;需要对33&#xff08;不一定&#xff0c;也可能多行&#xff09;的卡片布局&#xff0c;进行拖拽&#xff0c;拖拽过程中自动排序&#xff0c;以下代码是基于vue2&#xff0c;可直接运行&#xff0c;报错可评论滴我 部分代码优化来自于GPT4o和Clau…

78.WEB渗透测试-信息收集-框架组件识别利用(2)

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易锦网校会员专享课 上一个内容&#xff1a;77.WEB渗透测试-信息收集-框架组件识别利用&#xff08;1&#xff09; shiro&#xff1a;…

支持向量机 及其分类案例详解(附Python 代码)

支持向量机分类器预测收入等级 我们将构建一个支持向量机&#xff08;SVM&#xff09;分类器&#xff0c;以预测一个人基于14个属性的收入等级。我们的目标是判断收入是否高于或低于每年$50,000。因此&#xff0c;这是一个二元分类问题。我们将使用在此处可用的人口普查收入数…

JDBC基础

目录 一、JDBC概述 二、JDBC搭建 1.注册JDBC驱动程序 2.建立与数据库连接 3.获得Satement执行sql语句 4.关闭与数据库的链接通道 三、PreparedStatement和Statement 1、代码的可读性和可维护性 2、最重要的一点是极大地提高了安全性 四、结果集处理 一、JDBC概述 JD…

c语言指针2

文章目录 一、void * 指针二、const关键字1.const修饰变量2.const修饰指针变量2. 1 const放在*的右边2. 2 const放在*的左边2. 3 总结 三、指针的运算3. 1指针的加减运算3. 2 指针 - 指针3. 3 指针的关系运算 四、野指针4. 1 什么叫野指针&#xff1f;4. 1 野指针的成因4.1.1 指…

Poetry入门教程

以前使用模块管理和虚拟环境为pip和Virtualenv组合&#xff0c;随着Rasa、Dify等开源项目逐步使用Poetry模块管理&#xff0c;也开始尝试使用Poetry。本文简要介绍Poetry入门操作。 1.Poetry安装 可参考Poetry官网[1]推荐的安装方式&#xff1a; 通过Windows的Powershell如下…

C++编程: 使用 Nanomsg 进行 PUB-SUB 模式基准测试

文章目录 0. 引言1. Nanomsg简介1.1 可扩展性协议类型1.2 支持的传输机制1.3 NanoMsg 架构与实现 2. PUB-SUB 模式基准测试 0. 引言 Nanomsg 作为一款高性能的通信库&#xff0c;支持多种消息传递模式&#xff0c;其中包括 PUB-SUB&#xff08;发布-订阅&#xff09;。 本篇文…

yolov8环境安装

一、Miniconda Conda 是一个开源的包管理和环境管理系统&#xff0c;它能运行、安装和更新各种包和依赖&#xff0c;同时还能创建隔离的环境。 1.1 下载安装 Miniconda https://repo.anaconda.com/miniconda/Miniconda3-py39_24.5.0-0-Windows-x86_64.exe1.2 打开 Anaconda …

向量数据库(一)

写在前面 最近在学习一些 AI 相关的开发&#xff0c;了解了一些未接触过的东西&#xff0c;其中有一部分是向量数据库&#xff0c;想开一个专题&#xff0c;对相关的内容做一下整理。 内容 什么是向量数据库 一般在我们的日常开发中&#xff0c;使用的数据库存储主要有两种…

Matlab进阶绘图第65期—带分组折线段的柱状图

带分组折线段的柱状图是在原始柱状图的基础上&#xff0c;在每组柱状图位置处分别添加折线段&#xff0c;以进行对比或添加额外信息。 由于Matlab中未收录带分组折线段的柱状图的绘制函数&#xff0c;因此需要大家自行设法解决。 本文使用自制的BarwithGroupedLine小工具进行…

大模型算法面试题(十四)

本系列收纳各种大模型面试题及答案。 1、微调后的模型出现能力劣化&#xff0c;灾难性遗忘是怎么回事 微调后的模型出现能力劣化&#xff0c;灾难性遗忘&#xff08;Catastrophic Forgetting&#xff09;是一个在机器学习领域&#xff0c;尤其是在深度学习和大模型应用中频繁出…

数据库(MySQL)-DQL数据查询语言

DQL(Data Query Language 数据查询语言)的用途是查询数据库数据&#xff0c;如select语句。其中&#xff0c;可以根据表的结构和关系分为单表查询和多表联查。 单表查询 单表查询&#xff1a;针对数据库中的一张数据表进行查询 全字段查询 语法&#xff1a;select 字段名 fro…

报警系统与机房动力环境监控系统的集成及报警功能实施

在当今的运维行业中&#xff0c;确保关键基础设施的安全与稳定运行面临着诸多挑战&#xff0c;如设备故障、环境异常、非法入侵等。为了有效应对这些挑战&#xff0c;报警系统与机房动力环境监控系统的集成变得至关重要。本文旨在为运维团队提供关于报警系统与机房动力环境监控…

使用frrouting、gns3、pim实现ipv6组播(三)

翻遍整个网络都没有找到用ipv6进行组播推流的实例。 朋友说&#xff1a;A true strong person never complains about the environment 那么&#xff0c;就由我来创造一个吧~ 此文涉及到的所有软件均为开源软件&#xff0c;进行深入学习与其他平台移植时十分便利。 记得点赞额…

如何在GPU服务器上安装Stable Diffusion webUI

一、前提条件 1、硬件条件 GPU&#xff1a;12G&#xff0c;建议16G以上&#xff0c;还是尽量勾搭&#xff0c;好像现在最大32G&#xff0c;目前个人性价比24G有时长出售。 内存&#xff1a;16G以上&#xff0c;建议32G&#xff0c;也是越大越好。 硬盘&#xff1a;最好使用…

2024年【金属非金属矿山(地下矿山)安全管理人员】考试报名及金属非金属矿山(地下矿山)安全管理人员模拟考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年金属非金属矿山&#xff08;地下矿山&#xff09;安全管理人员考试报名为正在备考金属非金属矿山&#xff08;地下矿山&#xff09;安全管理人员操作证的学员准备的理论考试专题&#xff0c;每个月更新的金属非…

抖音矩阵管理系统功能说明:一站式掌握

在当下这个信息爆炸的时代&#xff0c;抖音作为短视频领域的佼佼者&#xff0c;其用户规模持续扩大&#xff0c;影响力日益增强。对于内容创作者和营销人员来说&#xff0c;如何高效管理抖音账号&#xff0c;实现内容的多平台分发和精准触达&#xff0c;成为了亟待解决的问题。…