Elements

参考

日期输入 Date Input

DateInput:日期输入。字段按日期段分段显示,聚焦的段使用墨色平铺填充。部件:Root、Label、Control、SegmentGroup、Segment、SegmentContext、HiddenInput。

Root · Label · Control · SegmentGroup · Segment · HiddenInput

#Control

纯造型的部件——自身没有属性,沿用部件结构的共享样式。

#HiddenInput

纯造型的部件——自身没有属性,沿用部件结构的共享样式。

#Label

纯造型的部件——自身没有属性,沿用部件结构的共享样式。

#Root

属性类型默认值描述
sizeString as PropType<"sm" | "md" | "lg">"md"分段字段高度,可为 sm、md 或 lg
allSegmentsdateInput.Props['allSegments']是否根据粒度包含所有日期和时间分段
defaultPlaceholderValuedateInput.Props['defaultPlaceholderValue']初始占位日期值
defaultValuedateInput.DateValue[]初始选中日期;无需控制选中日期时使用
disabledboolean日期输入框是否禁用
formstring隐藏 input 关联的表单
formatdateInput.Props['format']输入框中显示的日期格式
formatterdateInput.Props['formatter']格式化日期分段的函数
granularitydateInput.Props['granularity']日期输入框的粒度
hideTimeZonebooleanfalse值为 ZonedDateTime 时是否隐藏时区分段
hourCycledateInput.Props['hourCycle']格式化时间分段的小时制
idstring组件内部状态机的唯一标识
idsdateInput.Props['ids']日期输入框内各元素的 id;便于组合使用
invalidboolean日期输入框是否无效
localestring"en-US"格式化日期时使用的区域设置(BCP 47 语言标签)
maxdateInput.DateValue可选的最大日期
mindateInput.DateValue可选的最小日期
modelValuedateInput.DateValue[]日期输入框的 v-model 值
namestring隐藏 input 的 name 属性
placeholderValuedateInput.Props['placeholderValue']用于生成占位分段的占位日期
readOnlyboolean日期输入框是否只读
requiredboolean日期输入框是否必填
selectionModedateInput.SelectionMode"single"日期输入框的选择模式:single 表示只能选择一个日期;range 表示可以选择日期范围
shouldForceLeadingZerosboolean数字分段是否补前导零
timeZonestring"UTC"使用的时区
translationsdateInput.Props['translations']本地化文案
valuedateInput.DateValue[]受控的选中日期
事件载荷
focusChangedetails: FocusChangeDetails
valueChangedetails: ValueChangeDetails
update:modelValuevalue: DateValue[]
placeholderChangedetails: PlaceholderChangeDetails
update:placeholderValueplaceholderValue: DateValue

#SegmentContext

纯造型的部件——自身没有属性,沿用部件结构的共享样式。

#SegmentGroup

纯造型的部件——自身没有属性,沿用部件结构的共享样式。

#Segment

纯造型的部件——自身没有属性,沿用部件结构的共享样式。