Skip to content

日期区间输入框

@astryxdesign/core v0.7.1 · DateRangeInput

DateRangeInput 属性 ​

名称类型默认值说明
v-modelDateRange | nullnull{ start, end },ISO 日期。
labelstring—必填。无障碍名称。
presets{ label, getRange }[]—快捷按钮。getRange 返回区间。
monthCountnumber2弹出层显示几个月。
numberOfMonths1 | 2—并排月份数。传了这项时优先于 monthCount。
dateConstraintsArray<(date: Date) => boolean>—任一函数返回 false 时该日期不可选。
min / maxstring—区间外的日期不可选。
minRangeSpannumber1最短天数,包含两端。
maxRangeSpannumber—最长天数,包含两端。
weekStartsOn0-6 | 'sun' | 'mon' | ...周日,zh-CN 为周一日历的第一列。
hasClearbooleantrue显示清除按钮。键盘激活清除时,焦点回到触发按钮,并避免页面滚动。
isLabelHiddenbooleanfalse视觉上隐藏标签,读屏仍然读得到。旧名 labelHidden 同样可用,两者任一为真就隐藏。演练场里写 is-label-hidden。
containerClassstring | object | array—加到字段外壳的 class。在 InputGroup 和横向标签的 FormLayout 里没有外壳,此时不生效,开发环境会警告。
containerStyleStyleValue—加到字段外壳的行内样式。落点规则同 containerClass。
controlClassstring | object | array—加到带边框本体的 class。直接写在组件上的 class 也落在本体,不会落到触发按钮上。
controlStyleStyleValue—加到带边框本体的行内样式。
placeholderstring选择日期区间空值文案,跟随语言。
statusFieldStatusInput—错误、警告或成功。
statusVariant'attached' | 'detached' | 'tooltip''attached'状态消息的位置。
isDisabledbooleanfalse禁用字段。
disabledMessagestring—禁用原因。和 isDisabled 一起用时,悬停或键盘聚焦会显示这段提示,按钮仍可聚焦(带 aria-disabled),但打不开日历。
isLoadingbooleanfalse正在保存。字段不可改。
changeAction(value) => void | Promise<void>—区间提交之后再跑。返回 Promise 时保持加载。
isOptionalboolean—在标签旁标成可选。
isRequiredboolean—把字段标成必填。
labelTooltipstring—标签末尾信息图标里的说明。