作为前端开发人员，在项目开发中需要进行日期格式化的操作，而很多时候我们都会使用的 date-fns 库。但是，我们有时候需要使用的是较旧版本的 date-fns，这时候可以使用 npm 包 @date-io/date-fns-old，它是一个为 React Material-UI 构建的 Material-UI Pickers DateAdapter，它提供了在旧版本 date-fns 中使用 Material-UI Pickers 的能力。
安装
使用 npm 安装 @date-io/date-fns-old:
npm install @date-io/date-fns-old
如何使用
@date-io/date-fns-old 针对 Material-UI Pickers 提供了支持，假设您已经安装了 Material-UI Pickers。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
------ - ------------------------ ---------- - ---- -----------------------
------ - -------------- - ---- --------------------
------ ------------ ---- --------------------
------ - ----------------- - ---- ------------------------
----------- ----------- ----
----- ----- - --- --------------------
--------------- ---------- ------- ------
--- -- --
----- -------------------- - ----------------
-------- -
-------- -----
---------- -
----- ------- --- -
-
--
----------- -
----------- -------------- -------
--
---
-------- -------------------
------
---------
-------
-------
--------
-- -
------ -
------------------------ ------- ------------ - -------- ------------ --
-----------
------ ----- -
------- ----- -
---------- -------- -
--------- ------- -
-------- ------ -
------ ------ -
-------------------
--------------
------------- -----
---------------
------------- ----- --- --
--
--------------------------
--
-通过传递 OldDateFnsAdapter 作为 MuiPickersUtilsProvider 的 utils 属性，以获得与较旧 date-fns 版本的兼容性。
const utils = new OldDateFnsAdapter();
如果您现在使用旧版 date-fns，则可以将其与 OldDateFnsAdapter 一起使用：
import DateFnsUtils from 'date-fns/v2';
import { OldDateFnsAdapter } from '@date-io/date-fns-old';
const utils = new OldDateFnsAdapter({ dateFns: DateFnsUtils });示例代码
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ --------- ---- -------------
------ - ----------------- -------------- - ---- --------------------
------ - ------------- - ---- -----------------
------ - ------------------------ ---------- - ---- -----------------------
------ - ----------------- - ---- ------------------------
------ - ------ ----- ---------- ------ - ---- ---------------------------
------ ------------ ---- --------------------
----- ----------- - -----------------
----- ----- - ----------------
-------- -
-------- ----------
---------- -------
------ -----
-
---
----- ----- - --- --------------------
-------- ---------------------- -
----- - ----- -------- - - ------
------ -
------------------------ ------- ------------ - -------- ------------ --
-----------
------ ----- -
------- ---- -
---------- -------- -
-------------------
--------------
------------- -----
---------------
------------- ----- --- --
--
--------------------------
--
-
------------------------- - -
----- ---------------------------
--------- --------------
--
---------------------------- - -
----- --- -------
--------- -- -- --
--
------ ------- -------- ----- -
----- - ----- ------- - - ------------ --------
-------- ------------------- -
---------------
-
------ -
-----
-------------- ------- ----- --
----------------- ------- ----------- --
---------------- ------ ---- - ---------- ------------ - --
-------------------
----------------
------
--
-结论
在开发过程中，了解和学习使用@date-io/date-fns-old 包，可以为我们处理日期格式化问题带来方便，并且在兼容旧版本 date-fns 过程中也提供了很好的支持，同时在 Material-UI Pickers 的操作和使用上，也具备很高的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668efd9381d61a3540cf4