当前位置: 首页 > news >正文

JavaScript日期库之date-fn.js

用官网的话来说,date-fn.js 就是一个现代 JavaScript 日期实用程序库,date-fns 为在浏览器和 Node.js 中操作 JavaScript 日期提供了最全面、但最简单和一致的工具集。那实际用起来像它说的那么神奇呢,下面就一起来看看吧。

 

安装

安装的话就非常简单了,你可以用 npm/cnpm,或者你还可以用 yarn安装。

npm install date-fns --save
cnpm install date-fns --save
yarn add date-fns

引入

需要注意的是,用到的方法都需要在 {}中引入,并且 date-fns 是不支持全局引入的。

import { format } from "date-fns"; // 根据需要引入方法

实例

date-fns 中有非常多的方法可以选择,话不多说,下面直接进入实战开发。

1. 日期格式转换字符串格式

let dateTime = new Date();
console.log(dateTime); // Tue Sep 20 2022 16:08:58 GMT+0800 (中国标准时间)
let currentTime = format(dateTime, "yyyy-MM-dd HH:mm:ss");
console.log(currentTime); // 2022-09-20 16:09:33

 2. 字符串格式转换日期格式

let dateTime = "2022-09-20 16:09:33";
let currentTime = parseISO(dateTime);
console.log(currentTime); // Tue Sep 20 2022 16:09:33 GMT+0800 (中国标准时间)

 3. 现有日期做加/减 

方法描述
addYears加年
subYears减年
addMonths加月
subMonths减月
addWeeks加周
subWeeks减周
addDays加天
subDays减天
addHours加小时
subHours减小时
addMinutes加分钟
subMinutes减分钟

 例:当前日期减一天

let dateTime = new Date("2022-09-20 16:09:33");
let currentTime = format(subDays(dateTime, 1), "yyyy-MM-dd HH:mm:ss");
console.log(currentTime); // 2022-09-19 16:09:33

 4.日期之间的比较

 若 timeOne 大于 timeTwo ,返回 1;反之返回 -1,如果相等则返回 0

let timeOne = new Date("2022-09-20 16:09:33");
let timeTwo = new Date("2022-01-20 21:19:53");
let currentTime = compareAsc(timeOne, timeTwo);
console.log(currentTime); // 1

5.日期之间的差值

方法描述
differenceInYears
differenceInMonths
differenceInWeeks
differenceInDays
differenceInHours
differenceInMinutes

 例:相差多少年

let timeOne = new Date("2022");
let timeTwo = new Date("2015");
let currentTime = differenceInYears(timeOne, timeTwo);
console.log(currentTime); // 7

6.判断日期是否为今/昨/明天

 判断成立返回 true,反之返回 false

方法描述
isToday今天
isYesterday昨天
isTomorrow明天

 例:判断是否为今天

let dateTime = new Date("2022-09-20");
const currentTime = isToday(dateTime);
console.log(currentTime); // true

7.获取当天的开始/结束时间

方法描述
startOfDay开始时间
endOfDay结束时间

 例:获取今天开始时间

let dateTime = new Date("2022-09-20 16:09:33");
let currentTime = format(startOfDay(dateTime), "yyyy-MM-dd HH:mm:ss");
console.log(currentTime); // 2022-09-20 00:00:00

8. 获取当月月份的第一天/最后一天

方法描述
startOfMonth当月第一天
endOfMonth当月最后一天

 例:获取当月第一天

let dateTime = new Date("2022-09-20");
let currentTime = format(startOfMonth(dateTime), "yyyy-MM-dd");
console.log(currentTime); // 2022-09-01

9. 获取传入的日期是哪一年/月/周几/几号

方法描述
getYear哪一年
getMonth哪一个月 注意:因为是从0开始,所以最终的结果需要加1
getDay周几
getDate几号
getHours小时
getMinutes分钟

 例:获取传入的日期是哪一年

// 获取传入的日期是星期几
let dateTime = new Date("2022-12-20");
let currentTime = getYear(dateTime);
console.log(currentTime); // 2022

10.获取传入日期所在一年当中的第几周

let dateTime = new Date("2020-01-11");
let currentTime = getISOWeek(dateTime);
console.log(currentTime); // 2

11.判断传入的日期是否相等

 若返回 true,则是相等的,反之若为 false 则不相等

let timeOne = new Date("2020-12-31");
let timeTwo = new Date("2020-11-31");
let currentTime = isEqual(timeOne, timeTwo);
console.log(currentTime); // false

相关文章:

JavaScript日期库之date-fn.js

用官网的话来说,date-fn.js 就是一个现代 JavaScript 日期实用程序库,date-fns 为在浏览器和 Node.js 中操作 JavaScript 日期提供了最全面、但最简单和一致的工具集。那实际用起来像它说的那么神奇呢,下面就一起来看看吧。 安装 安装的话就…...

五一假期出游攻略【诗与远方】

原文在:PUSDN 可以导入作为模板引用。 五一旅行计划 假期倒计时 [该类型的内容暂不支持下载] 本次目标:五一旅行计划【画饼版】 前言 任何一个地方,一个城市,都有可观赏的地方,如果没去过邢台的,建议五一去…...

怎样正确做web应用的压力测试?

web应用,通俗来讲就是一个网站,主要依托于浏览器实现其功能。 提到压力测试,我们想到的是服务端压力测试,其实这是片面的,完整的压力测试包含服务端压力测试和前端压力测试。 下文将从以下几部分内容展开&#xff1a…...

Hibernate的持久化类

Hibernate是一个开源的ORM(对象关系映射)框架,用于将Java程序中的对象映射到数据库中的关系型数据。在Hibernate中,持久化类是用来映射Java对象和关系型数据库表的类。 编写Hibernate持久化类需要遵循以下规则: 持久…...

【c语言】enum枚举类型的定义格式 | 基本用法

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; 给大家跳段街舞感谢支持&#xff01;ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ…...

Python数据挖掘与机器学习

近年来&#xff0c;Python编程语言受到越来越多科研人员的喜爱&#xff0c;在多个编程语言排行榜中持续夺冠。同时&#xff0c;伴随着深度学习的快速发展&#xff0c;人工智能技术在各个领域中的应用越来越广泛。机器学习是人工智能的基础&#xff0c;因此&#xff0c;掌握常用…...

Java有用的书籍2

. 1.《Effective Java》是由Joshua Bloch撰写的一本Java编程规范和最佳实践指南&#xff0c;第三版是最新版。它涵盖了Java编程中一些常见问题和技巧&#xff0c;以及如何编写更加优雅、健壮和高效的Java代码。 该书共分为15章&#xff0c;每一章都涵盖了Java编程中的一个关键…...

CTA进网测试《5G消息 终端测试方法》标准依据:YDT 3958-2021

GB 21288-2022 强制国标要求变化​ 与GB 21288-2007相比&#xff0c; 新国标主要有以下变化&#xff1a; 1. 增加职业暴露定义&#xff1a; 2. 增加吸收功率密度定义&#xff1a; 3. 增加不同频率、不同人体部位适用的暴露限值&#xff1a; 4. 增加产品说明书的注释&#xff1a…...

[LeetCode复盘] LCCUP‘23春季赛 20230422

[LeetCode复盘] LCCUP23春季赛 20230422 一、总结二、 1. 补给马车1. 题目描述2. 思路分析3. 代码实现 三、2. 探险营地1. 题目描述2. 思路分析3. 代码实现 四、 3. 最强祝福力场1. 题目描述2. 思路分析3. 代码实现 五、 4. 传送卷轴1. 题目描述2. 思路分析3. 代码实现 六、 5…...

传统燃油车的智控App远控响应速度优化方向几点思考

一、分析当前问题及其影响因素 网络延迟&#xff1a;燃油车的App远控响应速度受到网络延迟的影响。网络延迟可能是由于网络拥堵或服务器响应速度慢等原因导致的。 用户设备&#xff1a;用户设备的性能也会影响燃油车的App远控响应速度。例如&#xff0c;设备的内存不足或存在故…...

回炉重造九---DNS服务器

1、DNS服务器的相关概念和技术 1.1 DNS服务器的类型 主DNS服务器从DNS服务器缓存DNS服务器&#xff08;forward DNS服务器{转发器}&#xff09; 1.1.1 主DNS服务器的作用 管理和维护所负责解析的域内解析库的服务器1.1.2 从DNS服务器的作用 从主服务器或从服务器“复制”解…...

UE4/5多人游戏详解(七、自定义委托,实现寻找会话和加入会话的函数,通过Steam进行两台电脑的联机)

目录 可能出现问题&#xff08;在六部分的测试可能无法连接的问题【在末尾加上了&#xff0c;怕有人没看见在这里写一下】&#xff09; 自定义委托 调整位置 创建更多的委托和回调函数给菜单&#xff1a; 多播和动态多播 代码&#xff1a; 委托变量 代码&#xff1a; 回…...

【数据库多表操作】sql语句基础及进阶

常用数据库&#xff1a; 数据库&#xff08;Database&#xff09;是按照数据结构来组织、存储和管理数据的仓库&#xff0c;它是长期存储在计算机内、有组织、有结构的数据集合。数据库是信息系统的核心部分&#xff0c;现代软件系统中大量采用了数据库管理系统&#xff08;DBM…...

DPDK和RDMA的区别

网络的发展好像在各方面都是滞后于计算和存储&#xff0c;时延方面也不例外&#xff0c;网络传输时延高&#xff0c;逐渐成为了数据中心高性能的瓶颈。因为传统两个节点间传输数据的网络路径上有大量的内存拷贝&#xff0c;导致网络传输效率低下&#xff0c;网络数据包的收发处…...

体验 Google Bard

环境 windows 10 64bitGoogle Bardpython 3.8 简介 本篇介绍一个开源的 Google 聊天机器人Bard 的 API 逆向工程&#xff0c;使用它&#xff0c;可以免费的使用 Bard 服务&#xff0c;项目地址&#xff1a;https://github.com/acheong08/Bard 安装及使用 通过 pip 来安装 pip &…...

MITA触摸屏维修WP4053米塔工控机控制屏维修

MITA-TEKNIK米塔触摸屏维修工控机工控屏控制器维修DISPLAY 2COM全系列型号 Mita-Teknik触摸屏维修常见故障&#xff1a;上电无显示&#xff0c;运行报故障&#xff0c;无法与电脑通讯&#xff0c;触摸无反应&#xff0c;触控板破裂&#xff0c;触摸玻璃&#xff0c;上电黑屏&a…...

Nacos简介 安装 配置

简介 什么是注册中心 注册中心在微服务项目中扮演着非常重要的角色&#xff0c;是微服务架构中的纽带&#xff0c;类似于通讯录&#xff0c;它记录了服务和服务地址的映射关系。在分布式架构中&#xff0c;服务会注册到这里&#xff0c;当服务需要调用其它服务时&#xff0c;…...

五、MyBatis各种查询功能

MyBatis的各种查询功能 如果查询出的数据只有一条&#xff0c;可以通过 实体类对象接收List集合接收Map集合接收 如果查询出的数据有多条&#xff0c;一定不能用实体对象接收&#xff0c;会抛TooManyResultsException&#xff0c;可以通过 实体类类型的List集合接收Map类型…...

uni-app——picker组件的用法、时间、日期、地区选择器等

1、uniapp–picker组件 <template><view class"signUp"><view class"signUp_dv1"><u-form :model"form" ref"uForm" label-width"95px"><u-form-item label"日期" :required"tr…...

什么情况需要考虑 mysql 分表

最近看到公司的其中一个数据库用户表每个月都要几百万的新用户数据增加&#xff0c;目前单表已经是两千多万了。所以找了 DBA 讨论&#xff0c;发现以前学的知识&#xff0c;以及网上的一些资料其实说的并不是很正确&#xff0c;比如 mysql 单表不建议超过一千万&#xff0c;我…...

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

html-<abbr> 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

给网站添加live2d看板娘

给网站添加live2d看板娘 参考文献&#xff1a; stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言 网站环境如下&#xff0c;文章也主…...

libfmt: 现代C++的格式化工具库介绍与酷炫功能

libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库&#xff0c;提供了高效、安全的文本格式化功能&#xff0c;是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全&#xff1a…...

uniapp 小程序 学习(一)

利用Hbuilder 创建项目 运行到内置浏览器看效果 下载微信小程序 安装到Hbuilder 下载地址 &#xff1a;开发者工具默认安装 设置服务端口号 在Hbuilder中设置微信小程序 配置 找到运行设置&#xff0c;将微信开发者工具放入到Hbuilder中&#xff0c; 打开后出现 如下 bug 解…...