Skip to content

日期输入框

@astryxdesign/core v0.7.1 · DateInput

DateInput Props ​

名称类型默认值说明
modelValueDate | nullnull当前选中的日期。
placeholderstringSelect a date / 选择日期占位文本。未设置语言时为英文,提供 zh-CN 后为中文。
minDate—最早可选日期。
maxDate—最晚可选日期。
isDateDisabled(date: Date) => boolean—返回 true 时该日期不可选。
dateConstraintsArray<(date: Date) => boolean>—任一函数返回 false 时该日期不可选。
namestring—表单字段名。
labelstring—字段标签。
descriptionstring—标签下方的说明。
isLabelHiddenbooleanfalse标签只留给读屏,页面上不显示。旧名 labelHidden 同样可用,两者任一为真就隐藏。
isOptionalboolean—在标签旁标成可选。
isRequiredboolean—把字段标成必填,输入框带上 aria-required。
labelTooltipstring—标签末尾信息图标里的说明。
format'date' | 'date_long' | 'date_weekday' | 'system_date' | ((iso: string) => string)'date_long'已提交日期的显示方式。函数收到的是 YYYY-MM-DD。
presentation'popover' | 'bottom-sheet' | 'native' | 'adaptive-bottom-sheet' | 'adaptive-native'未设置时为 adaptive-native弹出层、底部面板、系统日期控件,或按指针在它们之间切换。同时传了 nativePicker 时以这项为准。
nativePicker'touch' | 'always' | 'never'—旧的打开方式。touch 跟随指针,always 用系统控件,never 按指针在弹出层和底部面板之间切换。同时传了 presentation 时以 presentation 为准。
numberOfMonths1 | 21弹出日历并排的月份数。系统日期控件表达不了这项。
weekStartsOn0-6 | 'sun' | 'mon' | ...—弹出日历从哪一天开始一周。系统日期控件表达不了这项。
disabledbooleanfalse是否禁用。
isLoadingbooleanfalse字段不可改,并显示加载指示。
changeAction(value: Date | null) => void | Promise<void>—值提交之后再跑。返回 Promise 时,字段保持加载直到它结束。
widthnumber | string—整段字段的宽度。数字按像素算。
disabledMessagestring—禁用原因。和 disabled 一起用时,悬停或键盘聚焦会显示这段提示,输入框仍可聚焦(带 aria-disabled),但改不了值。旧名 disabledReason 同样可用。
hasClearbooleanfalse有值时显示清除按钮,清空后焦点回到输入框。旧名 clearable 同样可用。
clearLabelstringClear / 清除清除按钮的无障碍名称。设置了 label 时会带上它。未设置语言时为英文,提供 zh-CN 后为中文。
size'sm' | 'md' | 'lg''md'尺寸。
status'default' | 'error' | 'warning' | 'success' | { type, message? }—校验状态。对象带 message 时,说明会显示在字段下方。
statusVariant'attached' | 'detached' | 'tooltip''attached'状态说明的位置。
containerClassstring | object | array—加到字段外壳的 class。在 InputGroup 和横向标签的 FormLayout 里没有外壳,此时不生效,开发环境会警告。
containerStyleStyleValue—加到字段外壳的行内样式。落点规则同 containerClass。
controlClassstring | object | array—加到带边框本体的 class。直接写在组件上的 class 也落在本体,不会落到内部输入框上。
controlStyleStyleValue—加到带边框本体的行内样式。

DateInput 事件 ​

名称载荷说明
update:modelValuevalue: Date | null日期变化时触发。
changevalue: Date | null日期变化时触发。

DateInput 插槽 ​

名称说明
prefix输入框前面的图标。
suffix输入框后面的内容。