介绍
@preamp/datepicker 是一个基于 React 的日期选择器组件，提供了日历选择和快速日期选择两种模式，并且支持多语言、日期范围选择、日期可选范围限制、自定义样式等功能。
安装
首先，你需要安装 Node.js 和 npm，然后在命令行中运行以下命令：
--- ------- ------------------ ------
快速上手
@preamp/datepicker 的使用非常简单。只需要引入组件并在需要使用的地方渲染即可。
------ ----- ---- --------
------ ---------- ---- ---------------------
----- ------------ ------- --------------- -
------------------- -
-- ---------
----------------------- -----------
-
------------------ -
-- -------
------------------------ ------
-
-------- -
------ -
----------- ---------------------------- --
--
-
-API
Props
| Name | Type | Default | Description |
|---|---|---|---|
| mode | string | 'calendar' | 日期选择器模式，可选值有 'calendar' 和 'quick'。 |
| defaultValue | moment.Moment | 当前日期 | 默认日期。如果 mode 为 'quick'，则应该传入一个数组类型，默认为空数组。 |
| value | moment.Moment | 无 | 选中的日期。如果 mode 为 'quick'，则应该传入一个数组类型，默认为空数组。 |
| onChange | (date: ?moment.Moment) => void | 无 | 日期变化时的回调函数。如果 mode 为 'quick'，则应该传入一个函数，函数参数为选中的日期数组。 |
| onSelect | (date: moment.Moment) => void | 无 | 选择日期时的回调函数。 |
| lang | string | 'zh-CN' | 日期选择器语言，支持 'zh-CN' 和 'en-US'。 |
| disabledDate | (date: moment.Moment) => boolean | 无 | 是否禁用某个日期的回调函数。 |
| showToday | boolean | true | 是否显示 '今天' 按钮。 |
| showClear | boolean | true | 是否显示 '清除' 按钮。 |
| showWeekNumber | boolean | false | 是否显示周数。 |
| getContainer | () => HTMLElement | document.body | 渲染日期选择器的容器。 |
| className | string | 无 | 样式类名。 |
示例代码
日历模式
------ ----- ---- --------
------ ---------- ---- ---------------------
----- ------------ ------- --------------- -
------------------ -
-------------
---------- - -
------ -----
--
----------------- - -----------------------------
----------------- - -----------------------------
-
------------------- -
------------------------ -------
---------------
------
---
-
------------------ -
------------------------ ---------------------------
-
-------- -
------ -
-----------
-------------------------------
----------------------------
----------------------------
--
--
-
-快速选择模式
------ ----- ---- --------
------ ---------- ---- ---------------------
----- ------------ ------- --------------- -
------------------ -
-------------
---------- - -
------ ---
--
----------------- - -----------------------------
----------------- - -----------------------------
-
------------------- -
------------------------ -------
---------------
------
---
-
------------------ -
------------------------ ---------------------------
-
-------- -
------ -
-----------
------------
-------------------------------
----------------------------
----------------------------
--
--
-
-总结
@preamp/datepicker 是一个非常方便实用的日期选择器组件，带来的体验和效率都非常优秀。掌握了其使用方法和 API，相信你能在实际项目中更好地使用它，提高开发效率和用户体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/preamp-datepicker