Skip to content

日期时间输入框

@astryxdesign/core v0.7.1 · DateTimeInput

DateTimeInput 属性 ​

名称类型默认值说明
v-modelstring | nullnullYYYY-MM-DDTHH:MM。两部分都存在才有值。
labelstring—必填。这一对字段的无障碍名称。
placeholderstring—日期字段的占位符。
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。
isLabelHiddenbooleanfalse视觉上隐藏标签,读屏仍然读得到。旧名 labelHidden 同样可用,两者任一为真就隐藏。
containerClassstring | object | array—加到字段外壳的 class。在 InputGroup 和横向标签的 FormLayout 里没有外壳,此时不生效,开发环境会警告。
containerStyleStyleValue—加到字段外壳的行内样式。落点规则同 containerClass。
controlClassstring | object | array—加到带边框本体的 class。直接写在组件上的 class 也落在本体。
controlStyleStyleValue—加到带边框本体的行内样式。
hasClearbooleanfalse同时清除日期和时间。
min / maxstring—时间部分的 ISO 边界。
size'sm' | 'md' | 'lg''md'两个字段的高度。
statusFieldStatusInput—这一对字段的错误、警告或成功。
statusVariant'attached' | 'detached' | 'tooltip''attached'状态消息的位置。
isDisabledbooleanfalse同时禁用两个字段。
disabledMessagestring—为什么禁用。和 isDisabled 一起用时,悬停或键盘聚焦会显示这段提示,两段都仍可聚焦(带 aria-disabled)。
hasSecondsbooleanfalse时间那段带秒,模型值变成 YYYY-MM-DDTHH:MM:SS。系统时间控件表达不了秒,所以固定用 Astryx 的时间字段。
timeIncrement1 | 5 | 10 | 15 | 301时间那段方向键调整分钟的步长。不是默认值时固定用 Astryx 的时间字段。
timeOptionInterval5 | 10 | 15 | 30 | 60—预设时间的分钟间隔。设置后点时钟图标会按这个间隔列出可选时间,并按 min、max 的时刻裁剪;即使处于系统控件模式也用 Astryx 的时间字段。
timeLabelstring时间时间那段的读屏标签。
timePlaceholderstring选择时间时间那段没选值时显示的占位文本。
dateConstraintsArray<(date: Date) => boolean>—日期那一半里,任一函数返回 false 时该日不可选。
numberOfMonths1 | 2—日期月历并排的月份数。
weekStartsOn0-6 | 'sun' | 'mon' | ...—日期月历从哪一天开始一周。
nativePicker'touch' | 'always' | 'never'—旧的打开方式,同时传给日期和时间。
isLoadingbooleanfalse两个字段都不可改。
changeAction(value) => void | Promise<void>—日期和时间都齐了之后再跑。返回 Promise 时保持加载。清除也会跑。
isOptionalboolean—在标签旁标成可选。
isRequiredboolean—把这一对字段标成必填。
labelTooltipstring—标签末尾信息图标里的说明。