日期选择器
取日期器使用户能够输入或选择某个特定日期或一系列日期. 它们通常出现在形式和模式窗口中.
图片参考
日期选择器使用
import { useState } from 'react';
import { DatePicker, format } from '@dt-dds/react';
export const App = () => {
const [value setValue] = useState<string>('');
return
<DatePicker
label='Choose a date'
value={value}
onChange={(event) => setValue(event.target.value)}
onDateSelected={(date) => setValue(format(date))} />; // format date to specific locale
};
属性
| 财产 | 类型 | 默认 | 说明 |
|---|---|---|---|
children | ReactNode | - 说吧 | 在输入域内提供儿童组件. |
label | string | - 说吧 | 一个标签来帮助用户了解取枣者的范围. |
value | string | - 说吧 | 取日期器的输入值 。 需要遵循特定区域的格式 |
message | string | null | - 说吧 | 输入字段下面要显示的消息 . |
hasError | boolean | - 说吧 | 设置文本字段错误状态 . |
isDisabled | boolean | - 说吧 | 确定输入字段的已禁用状态. |
name | string | - 说吧 | 指定取枣者名称的属性 . |
required | boolean | - 说吧 | 用消息设置错误状态 : “ 需要此字段 ” |
style | CSSProperties | - 说吧 | 直接在文本字段中添加 Css 样式. |
onDateSelected | function | - 说吧 | 当用户在日历中的某一天点击,或者在打字时该日期是有效的时会被触发的函数. |
min | string | - 说吧 | 指定最小日期 |
max | string | - 说吧 | 指定最大日期 |
weekStartDay | number | 0 | 指定日历上周数的开始日期 |
isMultiMonth | boolean | false | 指定显示日历时出现的月数 |
mode | single | range | single | 指定选取日期的方式 |
onError | function | - 说吧 | 找到错误时触发 . |
locale | Locale | enUs | 指定取日期器所使用的本地化设置,包括语言、日期格式规则、月份名称、工作日名称和文化显示偏好。 这控制了日期是如何解析、格式化和向用户显示的. |
...rest | TextFieldProps | - 说吧 | 文本字段道具 |
堆栈
- 类型脚本 用于静态类型检查
- 反应 — JavaScript 用户界面库
- 情感 用于使用 JavaScript 写入 Css 样式
- 故事书 ——由Vite供电的UI组件环境
- 欢乐 - JavaScript 测试框架
- 反应测试库 - 以用户为中心测试用户界面组件
- ESLint 语录 代码林入
- 高级 用于代码格式
- 苏普 - 由Esbuild供电的脚本捆绑机
- 雅伦 从管理软件包
- 反应日拾取器 日历
- 日期 - fns 日期操作
图标
yarn build- 制作软件包yarn dev- 在当地运行软件包yarn lint- 将所有文件输入此软件包yarn test- 测试所有单位yarn test:report- 打开测试覆盖报告yarn test:update:snapshot- 进行所有单元测试并更新快照
汇编
运行 yarn build 从软件包的根部 齐声 将原始的 TypeScript 和 React 代码编译为普通 JavaScript .
这个 /dist 文件夹包含编译输出.
date-picker
└── dist
├── index.d.ts <-- Types
├── index.js <-- CommonJS version
└── index.mjs <-- ES Modules version
...
版本
跟着 语义版本
许可证
许可证根据 MIT 许可证