日期区间输入框
@astryxdesign/core v0.7.1 · DateRangeInput
DateRangeInput 属性
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
v-model | DateRange | null | null | { start, end },ISO 日期。 |
label | string | — | 必填。无障碍名称。 |
presets | { label, getRange }[] | — | 快捷按钮。getRange 返回区间。 |
monthCount | number | 2 | 弹出层显示几个月。 |
numberOfMonths | 1 | 2 | — | 并排月份数。传了这项时优先于 monthCount。 |
dateConstraints | Array<(date: Date) => boolean> | — | 任一函数返回 false 时该日期不可选。 |
min / max | string | — | 区间外的日期不可选。 |
minRangeSpan | number | 1 | 最短天数,包含两端。 |
maxRangeSpan | number | — | 最长天数,包含两端。 |
weekStartsOn | 0-6 | 'sun' | 'mon' | ... | 周日,zh-CN 为周一 | 日历的第一列。 |
hasClear | boolean | true | 显示清除按钮。键盘激活清除时,焦点回到触发按钮,并避免页面滚动。 |
isLabelHidden | boolean | false | 视觉上隐藏标签,读屏仍然读得到。旧名 labelHidden 同样可用,两者任一为真就隐藏。演练场里写 is-label-hidden。 |
containerClass | string | object | array | — | 加到字段外壳的 class。在 InputGroup 和横向标签的 FormLayout 里没有外壳,此时不生效,开发环境会警告。 |
containerStyle | StyleValue | — | 加到字段外壳的行内样式。落点规则同 containerClass。 |
controlClass | string | object | array | — | 加到带边框本体的 class。直接写在组件上的 class 也落在本体,不会落到触发按钮上。 |
controlStyle | StyleValue | — | 加到带边框本体的行内样式。 |
placeholder | string | 选择日期区间 | 空值文案,跟随语言。 |
status | FieldStatusInput | — | 错误、警告或成功。 |
statusVariant | 'attached' | 'detached' | 'tooltip' | 'attached' | 状态消息的位置。 |
isDisabled | boolean | false | 禁用字段。 |
disabledMessage | string | — | 禁用原因。和 isDisabled 一起用时,悬停或键盘聚焦会显示这段提示,按钮仍可聚焦(带 aria-disabled),但打不开日历。 |
isLoading | boolean | false | 正在保存。字段不可改。 |
changeAction | (value) => void | Promise<void> | — | 区间提交之后再跑。返回 Promise 时保持加载。 |
isOptional | boolean | — | 在标签旁标成可选。 |
isRequired | boolean | — | 把字段标成必填。 |
labelTooltip | string | — | 标签末尾信息图标里的说明。 |