介绍
@reacted/date-picker 是一个 React 组件，用于选择日期。它的设计风格基于 Ant Design，并支持多种主题。
安装
在你的项目中使用 npm 安装该组件：
npm install @reacted/date-picker
使用
在你的代码中引入模块并使用该组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- -----------------------
-------- ------------- -
----- ------ -------- - ---------------------
------ -
----------- ------------------ ------------ --
--
-API
DatePicker
日期选择器组件。
| Prop | Type | Default | Description |
|---|---|---|---|
| value | Date or string | - | 受控时的日期值 |
| defaultValue | Date or string | new Date() |
非受控时的默认日期值 |
| onChange | function | - | 日期值改变时的回调函数 |
| placeholder | string | - | 未选择日期时的占位符 |
| format | string | 'YYYY-MM-DD' |
显示日期的格式 |
| disabled | boolean | false |
是否禁用日期选择器 |
| allowClear | boolean | true |
是否允许清空日期 |
| inputReadOnly | boolean | false |
是否只读 |
| size | string | 'default' |
组件大小，可选值为 'large'、'middle' 和 'small' |
| className | string | - | 自定义类名 |
| style | object | - | 自定义样式 |
| disabledDate | function | - | 自定义禁用日期的函数 |
| locale | object | - | 自定义文本，覆盖默认文本 |
value, defaultValue
value 和 defaultValue 必须是 Date 对象或 ISO 8601 格式的字符串。
onChange(date: Date, dateString: string)
当日期值改变时，会触发 onChange 回调函数。date 参数是一个 Date 对象，dateString 是 ISO 8601 格式的日期字符串。
placeholder
未选择日期时的占位符。
format
显示日期的格式。默认为 'YYYY-MM-DD'，其中 YYYY 代表年份，MM 代表月份，DD 代表天数。
disabled
是否禁用日期选择器。
allowClear
是否允许清空日期。
inputReadOnly
是否只读。
size
组件大小。可选值为 'large'、'middle' 和 'small'。
className
自定义类名。
style
自定义样式。
disabledDate(date: Date)
自定义禁用日期的函数。date 是一个 Date 对象，如果该函数返回 true，则禁用这一天。
locale
自定义文本，覆盖默认文本。
主题
该组件支持多种主题。默认使用 Ant Design 的主题。你可以通过覆盖 Less 变量来自定义主题。首先，在你的项目中安装 less 和 less-loader：
npm install less less-loader
然后，在你的 webpack 配置文件中添加以下代码：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- ----------
---- -
-
------- ---------------
--
-
------- -------------
--
-
------- --------------
-------- -
------------ -
----------- ---
------------------ -----
--
--
--
--
--
--
--
-- ---
-其中，modifyVars 是一个对象，用于覆盖 Less 变量。例如，如果要修改日期选择器的主题色为蓝色，可以这样写：
modifyVars: {
'@primary-color': '#1890ff',
},完整的 Less 变量列表和示例代码可参考 Ant Design 的文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedabebb5cbfe1ea06108ce