更新时间：2024-02-26 GMT+08:00
日期选择器
使用场景
展示日期及时间。
组件图标：
基本属性
序号 |
属性名 |
说明 |
设置器类型 |
可选值 |
默认值 |
支持变量绑定 |
|---|---|---|---|---|---|---|
1 |
默认值 |
设置默认时间 |
时间选择器 |
- |
- |
√ |
2 |
只读 |
是否设置时间只读 |
switch开关 |
开/关 |
关 |
√ |
3 |
禁用 |
是否让时间不可选择 |
switch开关 |
开/关 |
关 |
√ |
4 |
可编辑 |
可手动在输入框手动修改日期 |
switch开关 |
开/关 |
开 |
√ |
5 |
占位符 |
用户提示信息 |
input输入框 |
- |
- |
√ |
6 |
日期类型 |
设置日期选择器的展示类型 |
select选择框 |
- |
日期时间 |
√ |
7 |
日期显示格式 |
选中后回显的日期格式 |
select选择框 |
- |
年月日小时分钟秒 |
√ |
8 |
面板对齐方式 |
日期选择的面板弹出位置 |
select选择框 |
- |
- |
√ |
9 |
默认日期 |
下拉面板打开时默认显示的日期 |
日期选择器 |
- |
- |
√ |
10 |
数据传递格式 |
选中日期后传递的格式 |
select选择框 |
- |
- |
√ |
11 |
开始占位符 |
开始日期的提示 |
input输入框 |
- |
- |
√ |
12 |
结束占位符 |
结束日期的提示 |
input输入框 |
- |
- |
√ |
13 |
分隔符 |
两个日期选择器之间的分隔符 |
input输入框 |
- |
- |
√ |
14 |
日期范围独立展示 |
日期选择器选择范围时是否支持选单个日期 |
switch开关 |
- |
- |
√ |
15 |
禁用日期 |
日期选择器设置禁用状态 |
代码编辑器 |
- |
- |
√ |
16 |
快捷项 |
快捷操作，给日期选择器创建快捷事件 |
collapse新增按钮 |
- |
- |
√ |
属性详解
日期类型
设置日期选择器的类型，需特别注意的是，选择日期、月份范围等后，底下才会显示“范围选择信息”等属性。
数据传递格式
设置数据传递格式，有如下格式：
图1 数据传递格式
禁用日期
通过编写JS代码，设置禁用的日期。
function disabledDate(time)
{
// return time.getTime() > Date.now();
}
高级事件
序号 |
事件名 |
触发条件 |
说明 |
|---|---|---|---|
1 |
onChange |
用户确认选中的值时触发 |
当用户选择某一日期触发的回调 |
2 |
onBlur |
当input失去焦点时触发 |
当光标离开日期输入框触发的回调 |
3 |
onFocus |
当input获取焦点时触发 |
当光标选择日期输入框触发的回调 |
父主题： 表单组件
