date-fns一个现代JavaScript日期工具库的使用

从datefns换到dayjs // 有关 date-fns很好,真的开箱即用,封装的也很好使。但是时区上没那么友好,不能全局设置时区,后面换成dayjs注意,封装好了之后,后面都是从这个文件使用的dayjs,类型从Date直接换到dayjsType(注意这里得export type而不是export const)这样用的都是unix并且tz之后的day,带有固定的上海时区。 阅读详情

基础方法

isToday():判断所传入日期是否为今天
isYesterday(): 判断是否为昨天
isTomorrow()判断是否为明天. 用法与isToday(), isYesterday()用法相同,就不加以累述了.
format(): 格式化日期函数
addDays():获得第n天之后的日期;
addHours(): 获得当前小时之后的小时(比如现在5点, 得到七点的时间).
addMinutes():获得当前分钟之后n分钟的时间
addMonths(): 获得当前月之后n个月的月份
subDays():获得当前日期之前n天的日期
subHours(): 获得当前时间之前n小时的时间
subMinutes(): 获得当前时间之前n分钟的时间
subMonths():获得当前月份之前n个月的时间
differenceInDays(): 获得两个时间相差几天,
differenceInHours();获得两个时间相差的小时.
differenceInMinutes(): 获得两个时间相差的分钟
differenceInMonths():获得两个时间相差月份
differenceInWeeks(): 获得两个时间相差的周数
differenceInYears():获得两个时间相差的年数
startOfDay():返回传入日期一天开始的Date对象(一天开始的时间)
endOfDay(): 获得传入日期一天的结束时间(与startOfDay对应)
startOfMonth():获取月份的第一天
endOfMonth(): 获得月份的最后一天
getDate(): 获取传入的日期是几号;
getDay(): 获取传入的日期是星期几
getMonth(): 返回传入时间的月份
getMinutes(): 返回传入时间的分钟数
getHours():返回传入时间的小时数
getISOWeek(): 返回传入时间所在月份的第几周.
isEqual(): 判断传入的时间是否相等
max(): 取得时间数组中的最大值
min(): 取得时间数组中的最小值

语法

1.isToday():判断是否为今天

import { isToday, format } from 'date-fns';
const day = new Date();
console.log(isToday(day)); // 结果为: true

2.isYesterday():判断是否为昨天

import { isYesterday, format } from 'date-fns';
const date = new Date();
console.log(isYesterday(date)); //结果false
console.log(isYesterday("2019-01-02T06:35:00.000Z")); //结果为true

3.isTomorrow()判断是否为明天. 用法与isToday(), isYesterday()用法相同.

4.format(): 格式化日期函数

function format (
    date: Date | string | number,
    format?: string,
    options?: {
      locale?: Object
    }
): string
namespace format {}

该函数传入三个参数, 第一个参数为必传参数,可以为date, string, number, 第二个format为日期格式,为可选参数.第三个暂时没用到是可选参数

const date = new Date();
console.log(format(date, 'HH:mm')); // 17:05
console.log(format(date, 'YYYY-MM-DD HH:mm:ss')); //2019-01-03 17:26:33
console.log(format(date, 'YYYY-MM-DD')); //2019-01-03 
// 不传第二个参数的时候.
console.log(format(date));//2019-01-03T17:27:27.102+08:00
  1. addDays():获得第n天之后的日期;
function addDays (
  date: Date | string | number,
  amount: number
): Date

该函数需要传入两个参数,第一个为date对象, 第二个为一个number类型的数字.传入1返回明天的日期,2则是后天的日期,以此类推. 返回的是一个日期对象

let date = new Date(); //2019-01-03
console.log(format( addDays(date, 1), 'YYYY-MM-DD HH:mm:ss')); // 2019-01-04 17:46:30
//在这里为了阅读方便,我在该函数外面套用了format.
console.log(format( addDays(date, 2), 'YYYY-MM-DD')); //2019-01-05

6.addHours(): 获得当前小时之后的小时(比如现在5点, 得到七点的时间).

7.addMinutes():获得当前分钟之后n分钟的时间

8.addMonths(): 获得当前月之后n个月的月份

9.subDays():获得当前日期之前n天的日期

function subDays (
  date: Date | string | number,
  amount: number
): Date

该函数传入两个参数,第一个参数date可以为Date, string,number, 第一个参数为number类型,例如(1,2). 返回一个Date对象

const date = new Date();
console.log(format(date, 'YYYY-MM-DD HH:mm:ss'));//2019-01-04 11:03:33
console.log(format( subDays(date, 2), 'YYYY-MM-DD HH:mm:ss')); //2019-01-02 11:03:33

10: subHours(): 获得当前时间之前n小时的时间

11: subMinutes(): 获得当前时间之前n分钟的时间

12: subMonths():获得当前月份之前n个月的时间

13: differenceInDays(): 获得两个时间相差几天

function differenceInDays (
  dateLeft: Date | string | number,
  dateRight: Date | string | number
): number

传入两个参数, dateLeft为时间比较靠前的时间, dateRight 为时间比较靠后的时间. 返回一个number类型的数字

const time = '2017-01-29 11:03:33';
const date = new Date();
console.log(format(date, 'YYYY-MM-DD HH:mm:ss'));
console.log(differenceInCalendarDays(date, time));
console.log(differenceInDays(date, time)); //705

14:differenceInHours();获得两个时间相差的小时.

15: differenceInMinutes(): 获得两个时间相差的分钟

16: differenceInMonths():获得两个时间相差月份

17: differenceInWeeks(): 获得两个时间相差的周数

18: differenceInYears():获得两个时间相差的年数

19:startOfDay():返回传入日期一天开始的Date对象(一天开始的时间)

function startOfDay (
  date: Date | string | number
): Date

传入一个参数,可以是Date类型,string, number类型. 返回一个Date对象.

const today = new Date();
const startDate = startOfDay(today); /Mon Jan 14 2019 00:00:00 GMT+0800 (中国标准时间)

20: endOfDay(): 获得传入日期一天的结束时间(与startOfDay对应)

function endOfDay (
  date: Date | string | number
): Date

传入一个参数,可以是Date类型,string, number类型. 返回一个Date对象.

const today = new Date();
const endDate = endOfDay(today);
console.log('endDate', endDate);// Mon Jan 14 2019 23:59:59 GMT+0800 (中国标准时间)

21: startOfMonth():获取月份的第一天

function startOfMonth (
  date: Date | string | number
): Date

传入一个参数,可以是Date类型,string, number类型. 返回一个Date对象.

const today = new Date();
const startMonth = startOfMonth(today); //Tue Jan 01 2019 00:00:00 GMT+0800 (中国标准时间)
const aa = format(startMonth, 'YYYY-MM-DD HH:mm:ss'); // 2019-01-01 00:00:00

22: endOfMonth(): 获得月份的最后一天

function endOfMonth (
  date: Date | string | number
): Date

传入一个参数,可以是Date类型,string, number类型. 返回一个Date对象.

const today = new Date();
const endMonth = endOfMonth(today); //Thu Jan 31 2019 23:59:59 GMT+0800 (中国标准时间)
const aa = format(endMonth, 'YYYY-MM-DD HH:mm:ss'); // 2019-01-31 23:59:59
console.log('endMonth', endMonth);

23: getDate(): 获取传入的日期是几号;

function getDate (
  date: Date | string | number
): number

传入一个参数,可以是Date类型,string, number类型. 返回一个number类型的数据

console.log(getDate('2019-01-15 00:00:00')); // 15

24: getDay(): 获取传入的日期是星期几

function getDay (
  date: Date | string | number
): number

传入一个参数,可以是Date类型,string, number类型. 返回一个number类型的数据

console.log(getDay('2019-01-15 00:00:00')); // 2

25: getMonth(): 返回传入时间的月份

function getMonth (
  date: Date | string | number
): number

传入一个参数,可以是Date类型,string, number类型. 返回一个number类型的数据

const day = new Date();
console.log(getMonth(day)); // 0
chartjs-adapter-date-fns:适用于Chart.js的date-fns适配器 chartjs-适配器日期-fns 概述 该适配器允许在Chart.js中使用date-fns。 需要 2.8.0或更高版本以及 2.0.0或更高版本。 注意:一旦加载,此适配器将覆盖Chart.js中提供的默认日期适配器(有副作用)。 安装 npm npm install date-fns chartjs-adapter-date-fns@next --save import { Chart } from 'chart.js' ; import 'chartjs-adapter-date-fns' ; CDN 默认情况下, https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@next ://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@next返回最新(最小化)版本,但是始终指 立即下载

相关推荐

避坑指南:Windows下OpenCV摄像头索引混乱问题的3种解决之道

本文详细解析了Windows下OpenCV摄像头索引混乱问题的3种解决方案,包括GUID查询法、DirectShow接口集成和注册表固化技术。针对工业视觉和智能监控场景,提供实战代码和性能优化建议,帮助开发者稳定识别多路摄像头设备,有效解决VideoCapture接口的索引漂移问题。

weixin_30836759的博客 406

TypeScript日期工具: date-fns日期工具的使用方法

date-fns是一个"麻雀虽小却五脏俱全"的日期工具库.如果不翻墙,是看不到官方文档的,国内文档又很少.以下总结内容为我在最近的一次开发项目中使用. 该使用方法是在angualr5.0环境中使用的. 使用typescript. 函数名 作用 isToday() 判断传入日期是否为今天 isYesterday() 判断传入日期是否为昨天 i..

前端小白 6万+

攻防世界 Crypto 新手练习区 1-12 全详解

本篇是攻防世界 Crypto 新手练习区的全解

闵行小鱼塘 3735

JavaScript日期库之date-fn.js

JavaScript日期库之date-fn.js

希望看完文章的你能够带着答案离开。 3034

单细胞测序数据分析——细胞通讯 CellChat

cellchat

G2530051386的博客 1万+

西电计组实验一 存储器实验

计组实验报告 实验一 存储器实验——FPGA中LPM_ROM定制与读出实验 一.实验目的   1.掌握FPGA中lpm_ROM的设置,作为只读存储器ROM的工作特性和配置方法;   2.用文本编辑器编辑mif文件配置ROM,学习将程序代码以mif格式文件加载于lpm_ROM中;   3.在初始化存储器编辑窗口编辑mif文件配置ROM;   4.验证FPGA中mega_lpm_ROM的功能。 二.实验原理   ALTERA的FPGA中有许多可调用的LPM (Library Parameterized Modu

Polaris的博客 1万+

【Web技术】1518- 抛弃 moment.js,基于 date-fns 封装日期相关 utils

作者:jjjona0215https://juejin.cn/post/7151050708094189582前言本文将简要介绍前端常用日期处理库:官方停止维护的moment.js,无缝代替moment.js的day.js,逐渐流行的date-fns,最后基于date-fns封装常用日期处理的utils。2022年了,如果项目中有用moment.js的可以用day.js代替减少体积做优化,新项目可...

pingan8787 631

Win11上从零跑通Carla自动驾驶仿真:保姆级环境配置与避坑指南(Python 3.7+)

本文详细介绍了在Win11系统上从零配置Carla自动驾驶仿真环境的完整流程,包括Python 3.7+环境搭建、依赖安装、常见问题排查及性能优化技巧。通过保姆级教程帮助开发者快速避坑,实现稳定的自动驾驶仿真测试环境部署。

weixin_33488239的博客 421

date-fns日期工具的使用方法

date-fns日期工具

yangyang3401的博客 4937

【文本分析学习】Anaconda+pytorch虚拟环境下的pycharm文本分析(含分词、词性标注、词形归一化、停用词、文本情感分析、词频、文本相似度,附数据代码) NLTK

文本分析学习之 Anadconda+pytorch虚拟环境下的pycharm文本分析(含分词、词性标注、词形归一化、停用词、文本情感分析、词频、文本相似度,附数据代码)

littlexmj的博客 2333

Vivado IP核调参大师:高效配置RS编码器的避坑指南

本文深入解析Vivado中RS编码器IP核的高效配置方法,涵盖符号宽度选择、码长优化和AXI4-Stream接口控制等关键参数。重点指导如何避开常见陷阱,实现FPGA设计中的资源优化与性能平衡,提升RS编码在通信系统中的可靠性。

metaverse5vr的博客 222

JavaScript日期处理的终极解决方案:现代日期工具库date-fns完整指南

在现代JavaScript开发中,日期处理是一个常见但容易出错的任务。无论是计算两个日期之间的差异、格式化日期显示,还是添加/减去特定时间间隔,开发者都需要可靠且高效的工具。date-fns作为一款轻量级、模块化的现代JavaScript日期工具库,为这些问题提供了优雅的解决方案。本文将详细介绍date-fns的核心功能、使用方法以及最佳实践,帮助你轻松掌握日期处理的精髓。 ## 🚀 为什么选

gitblog_01117的博客 708

Python 爬虫实战:共享单车数据采集全流程与市场洞察深度剖析

本文介绍了如何利用Python爬虫技术获取和分析共享单车运营数据。文章从项目背景出发,详细阐述了系统架构设计,包括数据抓取、清洗存储、分析和可视化模块。通过Scrapy、BeautifulSoup等工具实现数据采集,使用Pandas进行数据清洗,并借助Matplotlib进行可视化分析。实战部分展示了爬虫代码示例和城市分布、使用频率等分析案例。最终指出数据驱动分析有助于了解行业现状和市场趋势,未来可结合机器学习等方法进行深入洞察。该技术方案为共享单车行业研究提供了有效的数据支持。

专注于Python爬虫开发,分享爬虫技巧、项目实战与反爬经验,使用Scrapy、BeautifulSoup等工具,解决数据抓取难题。 2232

告别日期处理噩梦:date-fns在React与Node.js中的实战指南

日期处理是JavaScript开发中的常见难题,无论是前端React应用还是后端Node.js服务,都需要可靠的工具来简化日期操作。date-fns作为一款现代JavaScript日期工具库,以其轻量级、模块化和高性能的特点,成为开发者的理想选择。本文将带你探索如何在实际项目中高效使用date-fns,解决各种日期处理场景。 ## 为什么选择date-fns? date-fns采用函数式编程思

gitblog_00665的博客 716

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

date-fns:JavaScript 日期处理的实用工具库

date-fns是一个轻量级JavaScript日期处理库,提供200+函数覆盖格式化、比较、运算等常见需求。其核心特性包括:模块化设计支持按需引入、基于原生Date对象、纯函数式编程、完整TypeScript支持及多语言本地化。相比Moment.js,date-fns具有更好的体积控制和不可变性。最新v4.0版本新增原生时区支持,进一步简化开发。该库适合需要高效处理日期又不愿引入重量级依赖的项目,被称为"日期领域的Lodash"。安装简单,配合打包工具可实现最优体积优化。

yonggandev419的博客 177

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf:最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版,包括SDIO 接口的外设,SDIO 接口官方协议等。

date-fns 入门指南:在浏览器与 Node.js 中优雅地操作 JavaScript 日期

date-fns 是一个现代、模块化的 JavaScript 日期工具库,为在浏览器与 Node.js 中处理日期提供全面、简洁且一致的工具集。本文基于 date-fns 仓库(当前核心包版本为 v4.4.0)的官方文档与源码,讲解它的核心设计理念、安装方式、子模块体系以及最常用的函数用法,读完即可在项目中快速上手。仓库核心文档与源码可分别参考 [pkgs/core/docs/gettingSta

gitblog_00719的博客 283

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

JavaScript Date对象详解与实战应用

日期处理是前端开发中的基础需求,JavaScript通过Date对象提供原生支持。该对象基于Unix时间戳实现,能精确到毫秒级时间计算。其核心原理是通过维护从1970年1月1日UTC开始的毫秒数来表征时间点。在工程实践中,Date对象可用于日历组件开发、倒计时功能、日志时间戳等场景,但需注意时区转换和月份0-based等常见问题。现代前端项目常结合date-fns或Day.js等工具库提升开发效率,而TC39的Temporal提案将带来更完善的日期API。对于需要处理跨时区业务的系统,建议使用Intl.Da

weixin_29016865的博客 202

现代JavaScript日期处理的终极指南:用date-fns处理复杂日期计算

**date-fns** 是一个强大的现代JavaScript日期工具库,专门用于处理浏览器和Node.js环境中的日期操作。这个库提供了200多个函数,涵盖了各种日期处理需求,从简单的日期格式化到复杂的区间计算、时间差异分析和日期比较。无论你是前端开发者还是后端工程师,掌握date-fns都能让你的日期处理工作变得更加简单高效。💪 ## 为什么选择date-fns处理复杂日期计算? 在Ja

gitblog_00619的博客 703

《时间格式化工具的使用》

目录时间格式化工具学习笔记 时间格式化工具学习笔记 常用的时间格式化工具:moment、date-fns

yk_ddm的博客 439

date-fns使用详解

date-fns通过函数化、模块化的设计,能高效完成日期处理需求。在 Vue 中结合响应式数据(如refcomputed),可以便捷地实现动态日期展示和计算。

z2637305611的博客 1171

解锁date-fns超能力:从基础到高级扩展的全栈指南

在JavaScript开发中,日期处理一直是令人头疼的难题。你是否还在为日期格式化、时区转换、国际化支持而编写冗长复杂的代码?date-fns作为一款现代JavaScript日期工具库,以其轻量、模块化和高性能的特点,正在改变这一现状。本文将带你深入探索date-fns的生态系统与扩展功能,从基础使用到高级技巧,助你轻松应对各种日期处理场景。 ## 核心功能概览 date-fns提供了超过20...

gitblog_00256的博客 799

【亲测免费】 date-fns - 现代JavaScript日期实用工具库

date-fns - 现代JavaScript日期实用工具库 【免费下载链接】date-fns ⏳ Modern JavaScript date utility library ⌛️ 项目地址: https://gitcode.c...

gitblog_07155的博客 1317

Web开发中的中文日期处理与格式化实战

日期处理是Web开发中的基础功能,涉及国际化(i18n)和本地化(l10n)等核心概念。通过JavaScript的Intl API或自定义函数,开发者可以实现'一月十九日'这样的中文日期格式化。日期选择器的实现需要考虑用户交互体验,可使用原生HTML5元素或现代前端框架组件。在实际业务中,日期计算(如倒计时、星期判断)和时区处理是关键挑战。本文以Vue/React技术栈为例,结合day.js等工具库,展示了如何构建高性能的日期处理方案,特别适用于纪念日、活动倒计时等应用场景。

weixin_28077113的博客 29

date-fns 现代 JavaScript 日期实用程序库(基础篇)上

本文介绍了现代JavaScript日期处理库date-fns的基础使用。作为Moment.js的替代方案,date-fns具有轻量级、模块化、高性能和不可变性等优势,支持TypeScript和国际化。文章对比了date-fns与Moment.js、dayjs的特性差异,并提供了版本兼容性指南,建议Node.js 14+用户安装v2.30.0+版本。该库采用函数式API设计,支持按需加载和Tree-shaking优化,是处理日期时间的理想选择。

贤哲XianZhe的博客 1746

终极指南:如何用 date-fns 轻松处理 JavaScript 日期

日期处理是 JavaScript 开发中的常见需求,但原生 Date 对象的 API 往往不够直观和强大。date-fns 作为一款现代 JavaScript 日期工具库,以其轻量级、模块化和易用性受到广泛欢迎。本文将为你提供一份全面指南,帮助你快速掌握 date-fns 的核心功能和最佳实践,让日期处理变得简单高效。 ## 为什么选择 date-fns? date-fns 是一个轻量级的日期

gitblog_01023的博客 1042

date-fns:现代JavaScript日期处理库全面解析

date-fns:现代JavaScript日期处理库全面解析 【免费下载链接】date-fns ⏳ Modern JavaScript date utility library ⌛️ 项目地址: https://gitcode.c...

gitblog_00560的博客 530
上一篇: Eval Bind # 和= 笔记
下一篇: A parser-blocking, cross site (i.e. different eTLD+1) script, https://c.cnzz.com/core.php
.NET跨平台
博客等级 码龄15年 6066粉丝 738原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值