前端开发中，时间日期选择器是一个重要组件。其中 material-ui 是一个提供了一整套由 Google Material Design 所启发的 React 组件库，其 datetimepicker组件 除了具有时、分、秒选择以外，还有年、月、日、星期、时等多种选择方式，并支持多种时间格式化显示。而 npm 包 material-ui-datetimepicker 的推出，为前端开发带来方便快捷的日期时间选择工具。
安装
使用 npm 安装：
--- ------- --------------------------
引入
material-ui-datetimepicker 可以通过以下方式进行引入：
------ -------------- ---- -----------------------------
-------- ----- -
------ -
---- ----------------
--------------- ---------- ------- --
------
--
-需要注意的是，引入的时候需要显示指明引用的组件，即 DateTimePicker，否则可能出现问题。
基本用法
引入组件之后，通过配置 props 参数，可以轻松实现各种日期时间选择的需求。具体 props 参数如下：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value | Date |
当前日期 | 最初日期时间值。 |
| initialFocusedDate | Date |
value 或者 new Date() |
日期时间选择器首次打开时，选择框中的默认日期时间值。 |
| onChange | Function |
() => {} |
从日期时间选择器选择日期或者时间时，调用此函数，返回选择的日期时间。 |
| label | string |
Select date & time |
日期时间选择器选择框的标签。 |
value
可以通过 value 属性来指定初始日期时间值，并将选择的日期时间值，传递给 onChange 函数。这里需要注意，value 的类型必须是 Date 类型，如下所示：
--------------- ---------- ------- ------------------------------- --
initialFocusedDate
通过修改 initialFocusedDate 属性值，可以设置日期时间选择器初次打开后显示的日期时间。倘若此属性未指定，则默认值为 value 或者 new Date()。代码如下：
--------------- ------------------------ ------------------------------- ----------------------- ---------------- ----------- --
onChange
onChange 函数是用于接收未来日期时间的函数。开发者在这里可以处理日期时间选择器返回的值，如将其存储到 state 或者应用中。下面的代码演示了如何将 onChange 函数与日期时间选择器组件进行绑定：
-------- ----- -
----- ------------------ -------------------- - ------------ --------
-------- -------------------------- -
--------------------------
-
------ -
---- ----------------
--------------- ------------------------ ------------------------------- --
------
--
-label
推荐为每个日期时间选择器选择框加上标题，这样可以更好地帮助用户理解该选择器的作用。默认情况下，选择器选择框的标题为 Select date & time。为了修改标题，可以使用 label 属性，如下所示：
--------------- ---------- ------- --------------- --
格式化日期字符串
material-ui-datetimepicker 中提供了 FormatHelper 帮助函数，可以方便地将 date 对象转化为各种日期字符串格式，如：
------ - ------------ - ---- ----------------------------- ------------------------------- -------------- -- ---------- ------------------------------- ------ ----- -- ----- --
示例代码
------ ------ - -------- - ---- --------
------ - ------------ - ---- -----------------------------
------ -------------- ---- -----------------------------
-------- ----- -
----- ------------------ -------------------- - ------------ --------
-------- -------------------------- -
--------------------------
-
------ -
---- ----------------
---------------
------------------------
-------------------------------
---------------
--
---
-----
-------------------------------------------- --------------
----
---
-----
-------------------------------------------- ------ -----
----
------
--
-
------ ------- ----总结
material-ui-datetimepicker 是一款强大的组件库，为我们提供了一个方便、快速、美观且易用的日期时间选择器。 在使用该组件时，需要注意以上参数的使用，可以根据需要，进行灵活的配置。同样地，FormatHelper 帮助函数也是非常重要的一部分。 总之，精通了material-ui-datetimepicker 组件库，能够使我们在前端开发中事半功倍。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600672e50520b171f02e1dfd