DatePicker 日期选择器
用于选择日期的组件。
实现原理
使用 EDatePicker
组件封装了 EInput
和 Calendar
组件,通过 Overlay
实现弹出层效果。
基础用法
使用 type
属性来定义日期选择器的类型,支持日期、月份、年份的选择。
多选用法
使用 type
属性设置为 dates
、months
、years
来实现多选功能。
日期范围限制
使用 minDate
和 maxDate
属性来限制可选日期的范围。
默认值设置
使用 value
属性来设置日期选择器的默认值。
样式设置
使用 size
、colorType
、customColor
、defaultColor
、customHeight
、customFontSize
、customBorderRadius
等属性来自定义日期选择器的样式。
日期格式
使用 format
属性来自定义日期的显示格式。
日历组件
除了使用 EDatePicker
组件外,还可以直接使用 Calendar
组件来实现日期选择功能。
API
EDatePicker 属性
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
value | 当前选中的日期值 | String? | - |
format | 日期格式 | String? | - |
type | 日期选择器类型 | CalendarType | CalendarType.date |
minDate | 可选的最小日期 | DateTime? | - |
maxDate | 可选的最大日期 | DateTime? | - |
weekDate | 是否显示周视图,仅在 type 为 date 时有效 | bool | false |
placeholder | 占位文本 | String | '选择日期' |
disabled | 是否禁用 | bool | false |
clearable | 是否可清空 | bool | true |
size | 尺寸大小 | ESizeItem | ESizeItem.medium |
prefix | 前缀图标 | Widget? | - |
suffix | 后缀图标 | Widget? | - |
colorType | 颜色类型 | EColorType | EColorType.primary |
customColor | 自定义颜色 | Color? | - |
defaultColor | 默认颜色 | Color | EBasicColors.borderGray |
customHeight | 自定义高度 | double? | - |
customFontSize | 自定义字体大小 | double? | - |
customBorderRadius | 自定义圆角大小 | double? | - |
Calendar 属性
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
initialDate | 初始日期值 | String? | - |
type | 日历类型 | CalendarType | CalendarType.date |
minDate | 可选的最小日期 | DateTime? | - |
maxDate | 可选的最大日期 | DateTime? | - |
format | 日期格式 | String? | - |
weekDate | 是否显示周视图 | bool | false |
prevMonth | 上个月按钮 | Widget? | - |
nextMonth | 下个月按钮 | Widget? | - |
prevYear | 上一年按钮 | Widget? | - |
nextYear | 下一年按钮 | Widget? | - |
事件
事件名 | 说明 | 参数 |
---|---|---|
onSelect | 选择日期时的回调函数 | ValueChanged<String?> |
CalendarType 类型
类型 | 说明 |
---|---|
date | 日期 |
dates | 多个日期 |
month | 月份 |
year | 年份 |
months | 多个月份 |
years | 多个年份 |