@real_marshal/material-ui-pickers 是一个基于 Material-UI 的日期和时间选择器组件库。这个库使用了 date-fns 作为日期和时间处理的工具库，提供了丰富的功能并且易于扩展。
在这篇文章中，我们将学习如何使用 @real_marshal/material-ui-pickers 来创建一个带有日期和时间选择器的表单，以及如何在项目中扩展它。
安装
我们首先需要安装 @real_marshal/material-ui-pickers 和 date-fns。在终端中输入以下命令来安装它们：
--- ------- --------------------------------- --------
使用
安装完成后，我们就可以在代码中使用 @real_marshal/material-ui-pickers。
DatePicker
要使用 DatePicker，我们需要先将其导入：
------ - ---------- - ---- ------------------------------------
然后，我们可以在表单中添加 DatePicker：
----------- ------------ -------------------- --------------------------- -------------------- --
我们需要设置 label 属性来显示表单标签，设置 value 属性来设置初始值，设置 onChange 属性来处理值的变化。
DatePicker 组件还有其他可选的属性，比如 minDate、maxDate、disableFuture、disablePast 等，你可以根据自己的需求来设置它们。
TimePicker
要使用 TimePicker，我们需要将其导入：
------ - ---------- - ---- ------------------------------------
然后，我们可以在表单中添加 TimePicker：
----------- ------------ -------------------- --------------------------- --
与 DatePicker 类似，我们需要设置 label 属性来显示表单标签，设置 value 属性来设置初始值，设置 onChange 属性来处理值的变化。
TimePicker 组件同样也有其他可选的属性，比如 ampm、seconds、minTime、maxTime 等，你可以根据自己的需求来设置它们。
DateTimePicker
DateTimePicker 根据需求同时提供了日期和时间选择器。要使用 DateTimePicker，我们需要将其导入：
------ - -------------- - ---- ------------------------------------
然后，我们可以在表单中添加 DateTimePicker：
--------------- --------------- --------------------------- ---------------------------------- --
与前两个组件相同，我们需要设置 label、value 和 onChange 属性。
使用示例
这里是一个完整的范例，它将 DatePicker、TimePicker 和 DateTimePicker 打包在一起，你可以参照这个例子来学习如何使用 @real_marshal/material-ui-pickers。
------ ------ - -------- - ---- --------
------ - ----------------------- - ---- ------------------------------------
------ ------------ ---- --------------------
------ -
-----------
-----------
---------------
- ---- ------------------------------------
------ - ----------- ---------- ---- - ---- --------------------
-------- ----- -
----- -------------- ----------------- - ------------ --------
----- -------------- ----------------- - ------------ --------
----- --------------------- ------------------------ - ------------ --------
------ -
------------------------ ---------------------
-----------
----------- ------------ -------------- ---------------
-------
-------------
----- --------- ------------
----- ---- ------- -------
-----------
------------
--------------------
---------------------------
--------------------
---------
--
-------
----- ---- ------- -------
-----------
------------
--------------------
---------------------------
---------
--
-------
----- ---- --------
---------------
---------------
---------------------------
----------------------------------
---------
--
-------
-------
------------
--------------------------
--
-
------ ------- ----扩展
如果你需要更多的组件或者更多的自定义选项，你可以使用 @real_marshal/material-ui-pickers 提供的工具来扩展这个库。
假设我们现在需要一个 YearPicker 组件，它只提供年份的选择。我们可以继承 DatePicker 组件来创建一个新的组件：
------ ----- ---- --------
------ --------- ---- -------------
------ - ---------- - ---- ------------------------------------
------ ----- ---------- - -- ------ -------- -- -- -
----- ---------------- - ------ -- -
------------------------------
--
----- ---------------- - ------ ------------- --------------- -- -
----
--------
--------- ---
----------- -------------- - ------ - ----------
------ -------------- - ----- - ----------
--
-
------
------
--
------ -
-----------
----------------
---------- ----------- ---
---------------------------
------------------- -- ---- ---------- -------- ------- ----- -- -- ---
-----------------------------
--
--
--
-------------------- - -
------ ----------------------------
--------- --------------------------
--这个新组件通过重写 DatePicker 的属性来实现只显示年份的效果，同时，我们也提供了一个自定义的 renderYear 方法以便我们可以在年份的选择器中设置一个样式。
我们在 views 属性传入一个数组，这个数组表示我们期望显示的视图。在这个例子里，我们只需要显示年份，所以我们只传入了一个字符串 'year'。我们通过 renderView 属性将视图包裹到一个 div 中，以便设置样式。
结论
@real_marshal/material-ui-pickers 是一个基于 Material-UI 的日期和时间选择器组件库。在这篇文章中，我们学习了如何使用 DatePicker、TimePicker 和 DateTimePicker 创建日期和时间选择器的表单，并扩展了这个库添加了一个 YearPicker 组件。
如果你想要更深入地了解 @real_marshal/material-ui-pickers，你可以阅读它的官方文档。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600672693660cf7123b366d2