@material-ui/pickers 是一个基于 Material-UI 的日期和时间选择器组件库。它提供了丰富的选项和定制化，可以帮助我们轻松地在 React 应用中添加日期和时间选择器。
安装
安装该包很简单，我们只需要使用 npm 或者 yarn 命令即可：
# npm npm install @material-ui/pickers # yarn yarn add @material-ui/pickers
使用
引入 DatePicker 组件并使用它，你已经可以在你的应用里添加一个简单的日期选择器了：
-- -------------------- ---- -------
------ ------ ---------- ---- --------
------ ------------ ---- -----------------------
-------- ----- -
----- -------------- ----------------- - ------------ --------
------ -
-----------
--------------------
---------------------------
--
--
-
------ ------- ----DatePicker 的 value 属性接受一个 Date 对象，表示当前选中的日期，它必须与 onChange 属性一起使用。handleDateChange 是一个函数，当用户选择一个新的日期时，该函数将被触发并用新的日期更新 selectedDate 的状态。
此外，DatePicker 还可以通过传递属性来更改样式和语言：
-- -------------------- ---- ------- ----------- -------------------- --------------------------- ------------ ------------------- ------------ ------------------- ----------- ------------------- ------------ --
日期格式
@material-ui/pickers 可以根据需要设置日期格式。format 属性接受一个字符串，用于指定日期格式。例如：
<DatePicker format='yyyy-MM-dd' /> <DatePicker format='MM/dd/yyyy' /> <DatePicker format='dd/MM/yyyy' />
除此之外，@material-ui/pickers 还提供常见日期格式的快捷选项：
<DatePicker variant='inline' inputVariant='outlined' label='选择日期' format='LLL' />
时间选择器
除了日期选择器，@material-ui/pickers 还提供了时间选择器组件 TimePicker：
-- -------------------- ---- -------
------ ------ ---------- ---- --------
------ ------------ ---- -----------------------
-------- ----- -
----- -------------- ----------------- - ------------ --------
------ -
-----------
--------------------
---------------------------
--
--
-
------ ------- ----日历和时间范围选择器
除了日期和时间选择器，@material-ui/pickers 还提供了日历范围选择器 Calendar 和时间范围选择器 TimeRangePicker。它们的使用方法类似于 DatePicker 和 TimePicker：
-- -------------------- ---- -------
------ ------ ---------- ---- --------
------ ---------- ---------------- ---- -----------------------
-------- ----- -
----- -------------- ----------------- - ------------ --------
----- --------------- ------------------ - ------------- ---------------------------- --- ------------------------------
------ -
--
---------
-------------------
---------------------------
--
----------------
---------------------
----------------------------
--
---
--
-
------ ------- ----总结
@material-ui/pickers 是一个非常强大和灵活的日期和时间选择器组件库，它提供了很多选项和自定义，在 React 项目中快速集成提供了很大的帮助。
无论是简单的日期选择器还是复杂的时间范围选择器，它都可以很好地处理。希望这篇文章能够帮助你在项目中更好地使用该组件库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/115772