前言
在前端开发中，时间处理是必不可少的。然而 JavaScript 中的默认时间选择器并不美观，不易操作，所以在很多项目中我们需要选择一个合适的时间选择器库。随着 React 生态环境的日益成熟，有一个开箱即用的 React 时间选择器库，它就是 material-ui-pickers。
material-ui-pickers 是一个基于 Material-UI 的 React 时间选择器库。在使用 material-ui-pickers 前，你需要先在项目中引入 Material-UI 和其样式库才能够使用。该库内置了许多日期选择器、时间选择器、日期时间选择器和年份选择器等组件，能够满足我们大部分的时间处理需求。在本文中，我们将向大家介绍 material-ui-pickers 的使用方法。
安装
你可以通过 NPM 来安装 material-ui-pickers，输入以下命令：
npm install material-ui-pickers
引入
在你的 React 项目中，你需要先引入 Material-UI 和其样式库，否则会出现样式问题。接着，你需要引入需要使用的组件并注册在你的组件中。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ -
------------------------
-------------------
- ---- -----------------------
------ ------------ ---- --------------------
-------- --------- -
----- -------------- ---------------- - ------------ --------
----- ---------------- - ------ -- -
----------------------
--
------ -
------------------------ ---------------------
-------------------
--------------
----------------
-------------------
---------------
-----------------------
------------
--------------------
---------------------------
----------------------
------------- ------- ------
--
--
--------------------------
--
-
------ ------- --------在这个例子中，我们引入了 DateFnsUtils 工具库作为时间格式化工具包。然后我们使用了 KeyboardDatePicker 组件，并传入 disabledToolbar、variant、format、margin 等属性。这些属性可以用来定制你所需要的时间选择器组件。
常用组件
KeyboardDatePicker
KeyboardDatePicker 是一个基于文本框的日期选择器组件。它允许用户通过输入框直接输入和选择日期时间。
-- -------------------- ---- -------
-------------------
--------------
----------------
-------------------
---------------
-----------------------
------------
--------------------
---------------------------
----------------------
------------- ------- ------
--
--在该组件中，我们传入了如上述的禁用工具栏、内联等属性；而 format 则代表着组件的日期格式。
KeyboardTimePicker
KeyboardTimePicker 是一个基于文本框的时间选择器组件。它允许用户通过输入框直接输入和选择时间。
-- -------------------- ---- -------
-------------------
---------------
----------------
------------
--------------------
---------------------------
----------------------
------------- ------- ------
--
--在该组件中，我们传入了如上述的内联等属性。
DatePicker
DatePicker 是一个在弹出框中的日期选择器组件。它允许用户通过弹出框选择日期时间。
-- -------------------- ---- -------
-----------
--------------
----------------
-------------------
---------------
-----------------------
------------
--------------------
---------------------------
----------------------
------------- ------- ------
--
--在该组件中，我们传入了如上述的禁用工具栏、内联等属性；而 format 则代表着组件的日期格式。
TimePicker
TimePicker 是一个在弹出框中的时间选择器组件。它允许用户通过弹出框选择时间。
-- -------------------- ---- -------
-----------
---------------
-----------------------
------------
--------------------
---------------------------
----------------------
------------- ------- ------
--
--在该组件中，我们传入了如上述的内联等属性。
DateTimePicker
DateTimePicker 是一个在弹出框中的日期时间选择器组件。它允许用户通过弹出框选择日期时间。
-- -------------------- ---- -------
---------------
--------------
----------------
------------------ ------
---------------
---------------------------
--------------
--------------------
---------------------------
----------------------
------------- ------- ---- ------
--
--在该组件中，我们传入了如上述的禁用工具栏、内联等属性；而 format 则代表着组件的日期时间格式。
YearPicker
YearPicker 是一个年份选择器组件。它允许用户通过弹出框选择年份。
<YearPicker
label="选择年份"
value={selectedDate}
onChange={handleDateChange}
/>在该组件中，我们传入了如上述的内联等属性。
结语
这就是 material-ui-pickers 库的使用方法和介绍！通过这些时间处理组件，我们可以轻松地在 React 项目中对时间进行操作。通过修改这些组件的属性来定制化时间选择器，可以很好地满足我们的需求。不过要记得你需要先引入 Material-UI 和其样式库才能够使用！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/115679