@duskmoon-dev/el-datepicker (日语)
一个带有日历弹出功能的取日期器组件, 由 Web 组件创建 .
安装
bun add @duskmoon-dev/el-datepicker
使用量
自动注册
import '@duskmoon-dev/el-datepicker/register';
<el-dm-datepicker placeholder="Select date"></el-dm-datepicker>
手工登记
import { ElDmDatepicker, register } from '@duskmoon-dev/el-datepicker';
// Register with default tag name
register();
// Or register with custom tag name
customElements.define('my-datepicker', ElDmDatepicker);
大小
| 大小 | 说明 |
|---|
sm | 小取枣人 |
md | 中取日期器( 默认) |
lg | 大型取枣机 |
属性
| 属性 | 类型 | 默认 | 说明 |
|---|
value | string | '' | 选定日期( ISO 格式) |
placeholder | string | '' | 占位符文本 |
disabled | boolean | false | 禁用拾取器 |
format | string | 'YYYY-MM-DD' | 显示格式 |
min-date | string | - 说吧 | 最小可选择日期 |
max-date | string | - 说吧 | 最大可选日期 |
range | boolean | false | 启用日期范围选择 |
show-time | boolean | false | 包含时间选择 |
size | string | 'md' | 大小变体 : sm, (中文(简体) ), md, (中文(简体) ), lg |
活动
| 活动 | 细节 | 说明 |
|---|
change | { value } | 日期变化时被解除 |
open | - 说吧 | 日历打开时已开火 |
close | - 说吧 | 日历关闭时点火 |
实例
基础
<el-dm-datepicker></el-dm-datepicker>
有占位符
<el-dm-datepicker placeholder="Select a date"></el-dm-datepicker>
日期范围
<el-dm-datepicker range placeholder="Select date range"></el-dm-datepicker>
随着时间
<el-dm-datepicker show-time></el-dm-datepicker>
最小/最大日期
<el-dm-datepicker min-date="2024-01-01" max-date="2024-12-31"></el-dm-datepicker>
<el-dm-datepicker format="MM/DD/YYYY"></el-dm-datepicker>
大小
<el-dm-datepicker size="sm"></el-dm-datepicker>
<el-dm-datepicker size="md"></el-dm-datepicker>
<el-dm-datepicker size="lg"></el-dm-datepicker>
许可证
麻省理工学院