Skip to content

DatePicker 日期选择器

用于选择或输入日期

基本用法

以”日“为基本单位,基础的日期选择控件

其他日期单位​

通过扩展基础的日期选择,可以选择月、年或日期,传递model属性来控制

选择一段时间

通过扩展基础的日期选择,可以选择一段时间,传递range属性来控制

多选

通过扩展基础的日期选择,可以选择多个月、年或多个日期,传递multiple属性来控制

格式

通过format属性设置日期格式

占位符

通过placeholder属性设置占位符

范围占位符

通过startPlaceholderendPlaceholder属性设置范围占位符

禁用

通过disabled属性设置禁用日期

属性

属性名类型默认值说明
modelValueString/Date/Array""绑定值,支持单选/多选/范围模式
placeholderString"请选择日期"输入框占位文本
formatString"YYYY-MM-DD"日期显示格式
disabledBooleanfalse是否禁用
readonlyBooleanfalse是否只读
clearanceBooleantrue是否显示清除按钮
modelString"date"选择模式:date(日期)/year(年)/month(月)
multipleBooleanfalse是否支持多选
rangeBooleanfalse是否范围选择模式
startPlaceholderString"开始日期"范围模式开始占位文本
endPlaceholderString"结束日期"范围模式结束占位文本

事件

事件名参数说明
update:modelValue(value: Date/String/Array)选中值更新事件
change(value: Date/String/Array)值变化事件
clear-清除选择时触发