日期选择器DatePicker

基础用法

选择某一天

选择某一周

选择某一月

选择某一年

禁用

自定义每项样式以及禁用逻辑

关闭清空选中项

自定义宽度

自定义提示文案

开启简易样式

限定可选时间段

选择范围(天)

选择范围(周)

选择范围(月)

选择范围(年)

选择日+时间点

选择范围(时间点)

显示一个看板

隐藏年份选择

range类型点击确定前的拦截

range类型手动修改看板选中时间

看板内部切换日期类型

时间点、时间段切换

API

Attributes

名称类型可选值默认值说明
modelValue/v-modelstring--''绑定值
widthnumber--240触发器宽度
disabledboolean--false禁用整个组件
captionstring--''前置标签
clearableboolean--true是否可以清空
typestringyear/month/date/datetime/yearrange/monthrange/daterange/datetimerangedate日期类型
placeholderstring--选择日期提示文案
scopestring--''限定可选时间段
itemMapHandleFunction--undefined自定义每项样式以及禁用逻辑
timePickerobject'{format:"hms",stepH:1,stepM:15,stepS:15}''{format:"hms"}'日期+时间点类型(datetime),timePicker组件相关属性(注意:仅仅支持时间格式相关,如,format,stepH等,modelValue,scope依然由日期组件控制)
formatstring--''显示在输入框中的格式
range-separatorstring---选择范围时的分隔符,配合format使用
popoverAttrsPopoverProps{}--popover组件的属性 属性参考 Popover props
placeholderStyleobject{}--自定义placeholder样式
simpleStylebooleanfalse--是否开启简易样式
maxAllowedDaysNumber0--天范围选择时,最大可选天数:开始日期选择后,超出最大天数的日期将被禁用
singlePanelbooleanfalse--范围类型是否仅显示单个看板 - 用于不允许跨年、跨月的情况
yearSelectHidebooleanfalse--隐藏选择年份下拉框,用于无需区分年份,选择月、日的场景
beforeConfirmClickfunction--范围类型点击确定前的拦截,用于需要特殊处理是否允许回显选中结果的情况
forbidPanelHidebooleanfalse--下拉看板禁止关闭,用于特殊场景下用户需要自主控制看板不关闭的情况
confirmBtnAttrobject'{disabled: false,loading: false}'--type=range类型,确定按钮属性,需要配合forbidPanelHide,否则点击确定后会自动关闭看板
panelDefaultDatestring''--单个看板,看板头部默认选中的年(年、月)(例:type=date可设置为'2024.02';type=month,可设置为'2024')
startPanelDefaultDatestring''--type=range,第一个看板头部默认选中的年(年、月)
endPanelDefaultDatestring''--type=range,第二个看板头部默认选中的年(年、月)
disabledTipsTextstring''--整个组件禁用时提示文案
scopeDisabledTipsTextstring''--禁用节点的提示文案
confirmBtnTextstring''确定确定按钮文案
cancelBtnTextstring''取消取消按钮文案
showTypeSwitchbooleanfalse看板内是否显示日、周、月、年切换
typeSwitchRangebooleanfalseshowTypeSwitch=true时,是否开启范围选择
typeSwitchListArray'date', 'week', 'month', 'year''date', 'week', 'month', 'year'showTypeSwitch=true时,自定义可以切换的类型列表
typeSwitchSelectedstring'date''date', 'week', 'month', 'year'showTypeSwitch=true时,当前选中的时间类型(v-model:typeSwitchSelected)
toggleRangebooleanfalsetoggleRange设置为true可切换时间点、时间段

Events

名称回调参数说明
change(value: string)绑定值变化时触发
cleareventclear 事件
blurevent使选择器的输入框失去焦点, 并隐藏下拉框
focusevent使选择器的输入框获取焦点, 并打开下拉框
typeSwitchChangeeventshowTypeSwitch=true时,切换日期类型

Slots

名称默认说明
footerOperate底部左下角插槽

Exposes

名称说明类型
handleSetRangeSelected手动修改range看板开始、结束时间({startTime:string,endTime:string})=>void

最近更新于: