JavaScript日期库之date-fn.js

news2024/12/27 14:30:28

用官网的话来说,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

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

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

相关文章

深度学习 -- pytorch 计算图与动态图机制 autograd与逻辑回归模型

前言 pytorch中的动态图机制是pytorch这门框架的优势所在,阅读本篇博客可以使我们对动态图机制以及静态图机制有更直观的理解,同时在博客的后半部分有关于逻辑回归的知识点,并且使用pytorch中张量以及张量的自动求导进行构建逻辑回归模型。 …

Springboot 自动装配流程分析

目录 1.基础知识: 2.具体代码执行流程 3.流程总结: 4.参考文章: 1.基础知识: springboot的自动装配是利用了spring IOC容器创建过程中的增强功能,即BeanFactoryPostProcessor, 其中的ConfigurationCla…

【JavaEE】SpringBoot的日志

目录 日志作用 SpringBoot日志框架 日志打印 日志级别 类型 作用 修改级别 日志永久化 配置日志文件目录 配置日志文件名 简化日志打印和永久化——lombok 日志作用 问题定位:可以帮助开发人员快速找到问题出现的位置系统监控:可以把系统的运…

你不知道的node.js小知识——使用nvm管理node版本及node与npm版本对应关系详解

一、下载和安装nvm管理包 (1)下载链接 https://github.com/coreybutler/nvm-windows/releases (我选的是nvm-setup.exe) (2)解压安装 (2次选择文件要安装的目录 第一次是nvm 第二次是node.js) (…

01.DolphinScheduler集群搭建

文章目录 关于Apache DolphinScheduler简介特性简单易用丰富的使用场景High ReliabilityHigh Scalability 软硬件环境建议配置1. Linux 操作系统版本要求2. 服务器建议配置生产环境 3. 网络要求4. 客户端 Web 浏览器要求 官网地址 单机部署(没啥用)前置准备工作启动 DolphinSch…

J - Playing in a Casino

题意:相当于比大小的赌博计算赌徒一共需要支出多少赌资 比大小的规则很简单,是 在这个游戏中,有一个套牌由n卡。每张卡都有m数字写在上面。每个n玩家从一副牌中只收到一张牌。 然后所有玩家成对玩,每对玩家只玩一次。因此&#x…

SpringBoot 中 4 种常用的数据库访问方式

SpringBoot 中常用的数据库访问方式主要有以下几种: SpringBoot 是一个非常流行的 Java 开发框架,它提供了大量的开箱即用的功能,包括数据库访问。在开发过程中,我们经常需要使用数据库,因此选择一种合适的数据库访问…

Day2_vue集成elementUI完善布局

上一节,实现了从O到vue页面主体框架的搭建,这一节补充完善搜索框;新增、删除、导入、导出等按钮;表格设置;分页;面包屑的实现! 目录 搜索框 新增删除、导入、导出按钮 表格设置 设置边框&a…

记录安装Nodejs和HBuilderX搭建、部署微信小程序开发环境(一)

文章目录 1 前言2 注册小程序账号3 安装微信开发者工具4 安装Nodejs和HBuilderX4.1 windows用户安装Nodejs4.2 macos/linux用户安装Nodejs4.3 安装HBuilder X 5 创建项目5.1 新建一个项目5.2 进行基本配置 6 HBuilderX同步微信开发者工具6.1 打开服务端口6.2 调用微信开发者工具…

PHP初识

php简介 PHP全称超文本预处理语言&#xff0c;是在服务器端执行的脚本语言&#xff0c;是一种简单的&#xff0c;面向对象的开源脚本语言PHP脚本可以让Web开发人员快速的书写动态生成的网页 PHP脚本以<?php开始&#xff0c;以?>结束 <?php echo "hello world&…

Visual Studio调试代码教学

本篇博客主要讲解程序员最应该掌握的技能之一——调试。我个人认为&#xff0c;学习编程&#xff0c;有2件事情非常重要&#xff0c;一是画图&#xff0c;一是调试。下面我会以Visual Studio 2022为例&#xff08;VS的其他版本大同小异&#xff09;&#xff0c;演示如何调试一个…

测试开发实战项目 | 搭建Pytest接口自动化框架

一、预研背景 目前系统研发多为前后端分离&#xff0c;当后端接口研发完成后&#xff0c;可以不依赖前端界面通过接口测试提前发现问题并解决。同时由于软件迭代周期不断缩短&#xff0c;开发新功能后又担心影响原有功能&#xff0c;可以通过接口自动化进行原有功能快速回归测…

spi,iic,uart,pcie区别

一、spi SPI 是英语Serial Peripheral interface的缩写&#xff0c;顾名思义就是串行外围设备接口&#xff0c;是同步传输协议&#xff0c;特征是&#xff1a;设备有主机&#xff08;master&#xff09;和从机&#xff08;slave&#xff09;的区分&#xff0c;主机在通讯时发送…

分治与减治算法实验: 排序中减治法的程序设计

目录 前言 实验内容 实验目的 实验分析 实验过程 流程演示 写出伪代码 实验代码 代码详解 运行结果 总结 前言 本文介绍了算法实验排序中减治法的程序设计。减治法是一种常用的算法设计技术&#xff0c;它通过减少问题的规模来求解问题。减治法可以应用于排序问题&…

mysql数据库自动备份

前言 服务器中数据库的数据是最重要的东西,如果因为某些情况导致数据库数据错误,数据错乱或数据库崩溃,这时一定要及时的修复,但如果数据丢失或数据没法用了,这时就要回滚数据了,而这时就需要我们经常的备份数据库的数据 正文 一般别人都会推荐使用Navicat来备份和连接数据库…

Kafka时间轮(TimerWheel)--算法简介

一、简介 一个简单的时间轮是一个定时器任务桶的循环列表。 让u作为时间单位。尺寸为n的时间轮有n个桶&#xff0c;可以在n*u的时间间隔内保存定时器任务。每个bucket保存属于相应时间范围的计时器任务。 在开始时&#xff0c; 第一个桶保存[0&#xff0c;u&#xff09;的任务…

第7章 “字典”

1.字典简介 字典是什么&#xff1f; 解答&#xff1a;与集合类似&#xff0c;也是一种存储唯一值的数据结构&#xff0c;但它是以键值对的形式来存储。(键值对是最重要的特性)在Es6中新增了字典&#xff0c;名为Map字典的常用操作&#xff1a;增删改查 const map new Map()/…

使用PY003基于外部中断+定时器的方式实现NEC红外解码

写在前边 最近项目用到一款遥控器是38K红外载波,NEC协议的&#xff0c;找了很多帖子有看到用外部中断下降沿判断&#xff08;但可惜判定数据的方式是while在外部中断里面死等的&#xff09;&#xff0c;有看到用100us定时器定时刷来判断&#xff0c;感觉都不太适合用在我这个工…

基于MATLAB实现WSN(无线传感器网络)的LEACH(低能耗自适应集群层次结构)(Matlab代码实现)

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f389;3 参考文献 &#x1f468;‍&#x1f4bb;4 Matlab代码 &#x1f4a5;1 概述 低能耗自适应集群层次结构&#xff08;“LEACH”&#xff09;是一种基于 TDMA 的 MAC 协议&#xff0c;它与无线传感器网络 &a…

[2018.09.25][Sourceinsight]4.0配置

1 字体放大 (1)panel fonts: option,preference,colors&font (2)code fonts: option,file type options 2 修改默认字体 Alt y 3 显示行号 点击菜单栏View->Line Numbers 4 破解 https://blog.csdn.net/biubiuibiu/article/details/78044232 5 全局搜索字…