Skip to content

DatePicker 日期选择器

用于选择日期的组件。

实现原理

使用 EDatePicker 组件封装了 EInputCalendar 组件,通过 Overlay 实现弹出层效果。

基础用法

使用 type 属性来定义日期选择器的类型,支持日期、月份、年份的选择。

查看代码

多选用法

使用 type 属性设置为 datesmonthsyears 来实现多选功能。

查看代码

日期范围限制

使用 minDatemaxDate 属性来限制可选日期的范围。

查看代码

默认值设置

使用 value 属性来设置日期选择器的默认值。

查看代码

样式设置

使用 sizecolorTypecustomColordefaultColorcustomHeightcustomFontSizecustomBorderRadius 等属性来自定义日期选择器的样式。

查看代码

日期格式

使用 format 属性来自定义日期的显示格式。

查看代码

日历组件

除了使用 EDatePicker 组件外,还可以直接使用 Calendar 组件来实现日期选择功能。

查看代码

API

EDatePicker 属性

属性名说明类型默认值
value当前选中的日期值String?-
format日期格式String?-
type日期选择器类型CalendarTypeCalendarType.date
minDate可选的最小日期DateTime?-
maxDate可选的最大日期DateTime?-
weekDate是否显示周视图,仅在 type 为 date 时有效boolfalse
placeholder占位文本String'选择日期'
disabled是否禁用boolfalse
clearable是否可清空booltrue
size尺寸大小ESizeItemESizeItem.medium
prefix前缀图标Widget?-
suffix后缀图标Widget?-
colorType颜色类型EColorTypeEColorType.primary
customColor自定义颜色Color?-
defaultColor默认颜色ColorEBasicColors.borderGray
customHeight自定义高度double?-
customFontSize自定义字体大小double?-
customBorderRadius自定义圆角大小double?-

Calendar 属性

属性名说明类型默认值
initialDate初始日期值String?-
type日历类型CalendarTypeCalendarType.date
minDate可选的最小日期DateTime?-
maxDate可选的最大日期DateTime?-
format日期格式String?-
weekDate是否显示周视图boolfalse
prevMonth上个月按钮Widget?-
nextMonth下个月按钮Widget?-
prevYear上一年按钮Widget?-
nextYear下一年按钮Widget?-

事件

事件名说明参数
onSelect选择日期时的回调函数ValueChanged<String?>

CalendarType 类型

类型说明
date日期
dates多个日期
month月份
year年份
months多个月份
years多个年份

基于 MIT 协议发布