【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.rhkb.cn/news/387173.html

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

相关文章

界面控件Telerik UI for WPF 2024 Q2亮点 - 全新的AIPrompt组件

Telerik UI for WPF拥有超过100个控件来创建美观、高性能的桌面应用程序&#xff0c;同时还能快速构建企业级办公WPF应用程序。UI for WPF支持MVVM、触摸等&#xff0c;创建的应用程序可靠且结构良好&#xff0c;非常容易维护&#xff0c;其直观的API将无缝地集成Visual Studio…

vite tsx项目的element plus集成 - 按需引入踩坑

前面我们进行了开源组件的自研&#xff0c;很多组件可直接用现成的开源组件库&#xff0c;并不需要自己重复造轮子&#xff0c;为此我们讲如何在当前vite vitepress tsx技术整合的项目中实现element plus组件的按需引入&#xff0c;同时解决遇到的一些坑。 安装Element Plus…

Codeforces Round #956 (Div. 2) and ByteRace 2024

A.思维&#xff1a;https://codeforces.com/contest/1983/problem/A AC代码&#xff1a; #include<bits/stdc.h> using namespace std; int t; int n; int main(){cin>>t;while(t--){cin>>n;for(int i1;i<n;i) cout<<i<<" ";cout…

《浅谈如何培养树立正确的人工智能伦理观念》

目录 摘要&#xff1a; 一、引言 二、《机械公敌》的情节与主题概述 三、人工智能伦理与法律问题分析 1.伦理挑战 2.法律问题 四、培养正确的人工智能伦理观念的重要性 五、培养正确的人工智能伦理观念的途径与方法 1.加强教育与宣传 2.制定明确的伦理准则和规范 3.…

Doris全方位教程+应用实例

Impala性能稍领先于presto,但是presto在数据源支持上非常丰富&#xff0c;包括hive、图数据库、传统关系型数据库、Redis等 缺点&#xff1a;这两种对hbase支持的都不好&#xff0c;presto 不支持&#xff0c;但是对hdfs、hive兼容性很好&#xff0c;其实这也是顺理成章的&…

Swift学习入门,新手小白看过来

&#x1f604;作者简介&#xff1a; 小曾同学.com,一个致力于测试开发的博主⛽️&#xff0c;主要职责&#xff1a;测试开发、CI/CD 如果文章知识点有错误的地方&#xff0c;还请大家指正&#xff0c;让我们一起学习&#xff0c;一起进步。 &#x1f60a; 座右铭&#xff1a;不…

java-数据结构与算法-02-数据结构-06-双端队列

1. 概述 双端队列、队列、栈对比 注1&#xff1a; Java 中 LinkedList 即为典型双端队列实现&#xff0c;不过它同时实现了 Queue 接口&#xff0c;也提供了栈的 push pop 等方法 注2&#xff1a; 不同语言&#xff0c;操作双端队列的方法命名有所不同&#xff0c;参见下表 接…

day05 Router、vuex、axios

配置 router和vuex需要在创建vue项目的时候&#xff0c;开始的时候选择Manually select features&#xff0c;于是就可以在下一个创建配置讯问中选择router和vuex。 axios则需要执行命令行&#xff1a; npm install axios -S 之后再在需要发送请求的view导入即可。 router…

Chapter 20 Python包

欢迎大家订阅【Python从入门到精通】专栏&#xff0c;一起探索Python的无限可能&#xff01; 文章目录 前言一、自定义包1. 什么是Python包&#xff1f;2. 目录结构3. 导入方式4. __all__变量 二、第三方包1. 什么是第三方包&#xff1f;2. 安装第三方包 前言 在 Python 中&am…

PHP反序列化漏洞

一.PHP的序列化和反序列化 &#xff08;1&#xff09;.作用 PHP的序列化和反序列化是PHP中用于存储或传输PHP的值的一个过程。序列化是将变量转换为可存储或传输的字符串的过程&#xff0c;而反序列化则是将这些字符串转换回PHP变量的过程。这两个过程在PHP开发中非常有用&am…

vue element-ui日期控件传参

前端&#xff1a;Vue element-ui <el-form-item label"过期时间" :rules"[ { required: true, message: 请选择过期时间, trigger: blur }]"><el-date-picker v-model"form.expireTime" type"date" format"yyyy-MM-dd&…

Linux--序列化与反序列化

序列化 序列化是指将数据结构或对象状态转换成可以存储或传输的格式的过程。在序列化过程中&#xff0c;对象的状态信息被转换为可以保持或传输的格式&#xff08;如二进制、XML、JSON等&#xff09;。序列化后的数据可以被写入到文件、数据库、内存缓冲区中&#xff0c;或者通…

当年很流行,现在已经淘汰的Java技术,请不要学了!【建议收藏】

在Java技术的发展历程中&#xff0c;确实有一些曾经流行但现在已经被淘汰或不再推荐使用的技术。了解这些技术可以帮助你避免学习过时的知识&#xff0c;从而更高效地提升自己的技能。 以下是一些曾经流行但现在已经不太推荐学习的Java技术&#xff1a; 1. Servlet 2.x&#x…

谷粒商城实战笔记-71-商品服务-API-属性分组-前端组件抽取父子组件交互

文章目录 一&#xff0c;一次性创建所有的菜单二&#xff0c;开发属性分组界面1&#xff0c;左侧三级分类树形组件2&#xff0c;右侧分组列表3&#xff0c;左右两部分通信3.1 子组件发送数据3.2&#xff0c;父组件接收数据 Vue的父子组件通信父组件向子组件传递数据子组件向父组…

【odoo17】后端py方法触发右上角提示组件

概要 在前面文章中&#xff0c;有介绍过前端触发的通知服务。 【odoo】右上角的提示&#xff08;通知服务&#xff09; 此文章则介绍后端触发方法。 内容 直接上代码&#xff1a;但是前提一定是按钮触发&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; def bu…

自动化测试 pytest 中 scope 限制 fixture使用范围!

导读 fixture 是 pytest 中一个非常重要的模块&#xff0c;可以让代码更加简洁。 fixture 的 autouse 为 True 可以自动化加载 fixture。 如果不想每条用例执行前都运行初始化方法(可能多个fixture)怎么办&#xff1f;可不可以只运行一次初始化方法&#xff1f; 答&#xf…

17.延迟队列

介绍 延迟队列&#xff0c;队列内部是有序的&#xff0c;延迟队列中的元素是希望在指定时间到了以后或之前取出和处理。 死信队列中&#xff0c;消息TTL过期的情况其实就是延迟队列。 使用场景 1.订单在十分钟内未支付则自动取消。 2.新创建的店铺&#xff0c;如果十天内没…

【Ant Design Vue的更新日志】

🌈个人主页: 程序员不想敲代码啊 🏆CSDN优质创作者,CSDN实力新星,CSDN博客专家 👍点赞⭐评论⭐收藏 🤝希望本文对您有所裨益,如有不足之处,欢迎在评论区提出指正,让我们共同学习、交流进步! 以下是Ant Design Vue的更新日志 版本1.7.0(发布日期:2023年4月) …

TCP/IP协议——使用Socket套接字实现

目录 Socket 使用Socket实现TCP客户端和服务器的过程 使用Socket搭建TCP服务器 线程优化 向客户端发送消息 连接的断开 客户端主动断开 服务端主动断开 服务器完整的程序 使用Socket编写客户端程序连接TCP服务器 Socket Socket是一种网络通信协议&#xff0c;它允许…

渗透测试:筑牢网络安全的坚固防线

在当今这个互联网高度发达的时代&#xff0c;网络安全已成为维护社会稳定和经济发展的重要基石。随着互联网的普及&#xff0c;网络攻击手段日益复杂多变&#xff0c;各类安全威胁层出不穷。为了有效应对这些挑战&#xff0c;渗透测试作为一种重要的安全测试与评估方法&#xf…