在前端开发中，我们经常要处理日期和时间的相关操作，比如格式化、加减、比较等等。而 @fluentui/date-time-utilities 就是为此而生的一个 npm 包，它提供了一系列方便的时间工具函数，能够帮助我们简洁、高效地处理时间相关问题。
安装和引入
使用 npm 进行安装：
--- ------- ----------------------------- ------
然后我们就可以在代码中引入需要的函数了：
------ - -------- ---------------- --------- - ---- --------------------------------
常用函数
addDays(date: Date, days: number): Date
功能：将指定日期增加/减少指定天数
参数：
date：要增加/减少的日期（Date 类型）days：要增加/减少的天数（数字类型）
返回值：增加/减少后的新日期（Date 类型）
示例代码：
----- ----- - --- ------- ----- -------- - -------------- --- -- ---- ----- --------- - -------------- ---- -- ---- ---------------------- -- ------- ----------------------- -- -------
formatMonthYear(date: Date, strings: IDateFormatting): string
功能：将指定日期格式化成“月份年份”（比如“2022年7月”）
参数：
date：要格式化的日期（Date 类型）strings：可选参数，用于指定格式化字符串（IDateFormatting 类型）
返回值：格式化后的字符串
示例代码：
----- ----- - --- ------- ----- --- - ---------------------- - ---------- ---------- ----- --------- --- ----------------- -- ----------
parseDate(dateString: string, country?: string): Date
功能：将指定字符串解析成日期对象
参数：
dateString：要解析的字符串country：可选参数，用于指定日期格式（默认值为美国格式）
返回值：解析得到的日期对象（Date 类型）
示例代码：
----- --- - ------------- ----- ----- - --------------- ------------------- -- ------
实战应用
下面我们演示如何使用这些函数来实现一个简单的日历应用，具体来说，我们要实现两个功能：
- 根据用户选择的日期，显示当月的日历
- 支持切换到上/下月
完整代码如下：
------ ------ - -------- - ---- --------
------ - -------- ---------------- --------- - ---- --------------------------------
--------- -------------- --
----- --------- ------------------------ - ----- -- -
----- ------ -------- - ------------ --------
----- --------- - -- -- -
--------------------- ------ -- ---
--
----- --------- - -- -- -
--------------------- ----- -- ---
--
----- -------------- - -- -- -
----- --------- - --- ------------------------ ---------------- ---
----- ------- - ----------- ------------------------ --------------- - -- --- ----
----- --------- - -------------------
----- ------- - -----------------
----- --------- - ------------------ - -------------------- - -------- - --
----- ----- - --- -------
----- ---- - ---
--- ---- - - -- - - ---------- ---- -
----- ------- - ------------------ ---
----- ------- - ----------------- --- --------------- -- ------------------ --- -----------------
----- ------ - ------------------ --- ----------------
-- -- - - --- -- -
--------------
-
----------------- - ---------
---- ------- ---------------- -------- - ------ - --- --------- - ------- - ------
-------------------
------
--
-
------ -------------- -- -- -
---- ------- ----------------
-----
------
---
--
----- ---------------- - - -- -
----- --- - ---------------
----- ------- - ---------------
-----------------
--
----- ------------- - -- -- -
----------- --------
--
------ -
---- ---------------------
---- -------------------
------- --------------------
-- --------------- ---------------
---------
---- -----------------------------------------------
------- --------------------
-- --------------- ----------------
---------
------
---- -----------------------------------------
---- -------------------
------ ----------- -------- --------------------------- --
------- -----------------------------------
------
------
--
--
------ ------- ---------如此简单地使用 @fluentui/date-time-utilities 包，便实现了一个基本日历应用，不得不说，这个包真的很方便！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedabe2b5cbfe1ea06108b4