本文主要介绍如何使用 npm 包 react-datetime-inputs，此包提供了日期和时间的选择组件，可以用于 React 项目中。
1. 安装
npm install react-datetime-inputs
2. 使用
2.1. 导入组件
import { DatePicker, TimePicker } from 'react-datetime-inputs';2.2. 日期选择器 DatePicker
DatePicker 支持以下属性：
| 属性 | 描述 |
|---|---|
| value | 当前选中的日期，格式为 YYYY-MM-DD |
| onChange | 当选中的日期改变时触发的回调函数 |
| format | 显示日期的格式，默认为 YYYY-MM-DD |
| minDate | 最小可选日期，格式为 YYYY-MM-DD |
| maxDate | 最大可选日期，格式为 YYYY-MM-DD |
| className | 自定义样式类名 |
| placeholder | 当未选择日期时显示的占位文本 |
| inputProps | 传递给 input 元素的其他属性，例如 id、name 等 |
示例代码：
-- -------------------- ---- -------
------ - -------- - ---- --------
------ - ---------- - ---- ------------------------
-------- ----- -
----- ------ -------- - -------------
----- ------------ - ------- -- -
---------------
--
------ -
----------- ------------ ----------------------- --
--
-2.3. 时间选择器 TimePicker
TimePicker 支持以下属性：
| 属性 | 描述 |
|---|---|
| value | 当前选中的时间，格式为 HH:mm:ss |
| onChange | 当选中的时间改变时触发的回调函数 |
| format | 显示时间的格式，默认为 HH:mm:ss |
| className | 自定义样式类名 |
| placeholder | 当未选择时间时显示的占位文本 |
| inputProps | 传递给 input 元素的其他属性，例如 id、name 等 |
示例代码：
-- -------------------- ---- -------
------ - -------- - ---- --------
------ - ---------- - ---- ------------------------
-------- ----- -
----- ------ -------- - -------------
----- ------------ - ------- -- -
---------------
--
------ -
----------- ------------ ----------------------- --
--
-3. 总结
本文介绍了 npm 包 react-datetime-inputs 的使用方法，可以方便地在 React 项目中使用日期和时间选择组件，提高开发效率和用户体验。在使用时需要注意组件的属性和格式，根据需求进行相关配置即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005725581e8991b448e8692