日期时间输入框
@astryxdesign/core v0.7.1 · DateTimeInput
DateTimeInput 属性
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
v-model | string | null | null | YYYY-MM-DDTHH:MM。两部分都存在才有值。 |
label | string | — | 必填。这一对字段的无障碍名称。 |
placeholder | string | — | 日期字段的占位符。 |
hourFormat | '12h' | '24h' | '12h' | 时间的显示格式。模型值仍是 ISO。 |
presentation | 'popover' | 'bottom-sheet' | 'native' | 'adaptive-bottom-sheet' | 'adaptive-native' | 'text-input' | — | 日期和时间共用的打开方式。bottom-sheet,以及粗指针上的 adaptive-bottom-sheet,合成一个底部面板,在日期和时间之间切换。text-input 只作用于时间。不传时细指针弹出,粗指针用系统控件。显式值压过 nativePicker。 |
isLabelHidden | boolean | false | 视觉上隐藏标签,读屏仍然读得到。旧名 labelHidden 同样可用,两者任一为真就隐藏。 |
containerClass | string | object | array | — | 加到字段外壳的 class。在 InputGroup 和横向标签的 FormLayout 里没有外壳,此时不生效,开发环境会警告。 |
containerStyle | StyleValue | — | 加到字段外壳的行内样式。落点规则同 containerClass。 |
controlClass | string | object | array | — | 加到带边框本体的 class。直接写在组件上的 class 也落在本体。 |
controlStyle | StyleValue | — | 加到带边框本体的行内样式。 |
hasClear | boolean | false | 同时清除日期和时间。 |
min / max | string | — | 时间部分的 ISO 边界。 |
size | 'sm' | 'md' | 'lg' | 'md' | 两个字段的高度。 |
status | FieldStatusInput | — | 这一对字段的错误、警告或成功。 |
statusVariant | 'attached' | 'detached' | 'tooltip' | 'attached' | 状态消息的位置。 |
isDisabled | boolean | false | 同时禁用两个字段。 |
disabledMessage | string | — | 为什么禁用。和 isDisabled 一起用时,悬停或键盘聚焦会显示这段提示,两段都仍可聚焦(带 aria-disabled)。 |
hasSeconds | boolean | false | 时间那段带秒,模型值变成 YYYY-MM-DDTHH:MM:SS。系统时间控件表达不了秒,所以固定用 Astryx 的时间字段。 |
timeIncrement | 1 | 5 | 10 | 15 | 30 | 1 | 时间那段方向键调整分钟的步长。不是默认值时固定用 Astryx 的时间字段。 |
timeOptionInterval | 5 | 10 | 15 | 30 | 60 | — | 预设时间的分钟间隔。设置后点时钟图标会按这个间隔列出可选时间,并按 min、max 的时刻裁剪;即使处于系统控件模式也用 Astryx 的时间字段。 |
timeLabel | string | 时间 | 时间那段的读屏标签。 |
timePlaceholder | string | 选择时间 | 时间那段没选值时显示的占位文本。 |
dateConstraints | Array<(date: Date) => boolean> | — | 日期那一半里,任一函数返回 false 时该日不可选。 |
numberOfMonths | 1 | 2 | — | 日期月历并排的月份数。 |
weekStartsOn | 0-6 | 'sun' | 'mon' | ... | — | 日期月历从哪一天开始一周。 |
nativePicker | 'touch' | 'always' | 'never' | — | 旧的打开方式,同时传给日期和时间。 |
isLoading | boolean | false | 两个字段都不可改。 |
changeAction | (value) => void | Promise<void> | — | 日期和时间都齐了之后再跑。返回 Promise 时保持加载。清除也会跑。 |
isOptional | boolean | — | 在标签旁标成可选。 |
isRequired | boolean | — | 把这一对字段标成必填。 |
labelTooltip | string | — | 标签末尾信息图标里的说明。 |