使用方法

DateRangeInput 选择开始日期和结束日期。值是 { start, end }，两端都是 ISO 日期；没有选择时是 null。

<script setup lang="ts">
import type { DateRange } from '@astryx-vue/core/DateRangeInput'
import { DateRangeInput } from '@astryx-vue/core/DateRangeInput'
import { shallowRef } from 'vue'

const range = shallowRef<DateRange | null>(null)
</script>

<template>
  <DateRangeInput v-model="range" label="日期区间" />
</template>

弹出层默认把两个月放在同一条标题下面。第一次点击记下起点，第二次点击在跨度合法时提交区间。再次点击起点时，最短天数是 1 就提交单日，否则取消这次选择。两端都在今年时，收起后的文字不写年份。预设按钮一直在日历旁边。两个月并排放不下时，月份会自动换成上下两行。约束函数可以再排除具体的日子。正在保存时字段不能改，保存会在区间写进去之后进行。

解剖

部分	说明
标签	触发器上方的文字，说明期望的是什么日期范围。
字段表面	带边框的控件，装着日历开关、范围触发器和尾部操作。
触发按钮	显示格式化后的范围或占位的按钮。点击打开浮层。
日历图标	同样能打开浮层的尾部图标。
日历浮层	双月历网格，支持范围选择和悬停预览。
预设侧栏	日历旁边的预设范围列表。
预设按钮	一键选中某个预设范围，并反映当前和禁用状态。
清除按钮	把范围重置为空的 × 按钮。
状态消息	触发器下面的错误、警告或成功提示。

最佳实践

指引	实践
推荐	把人们最常选的区间做成预设。
推荐	单日或过长区间不合法时，设置 minRangeSpan 和 maxRangeSpan。天数包含两端。
避免	用它选单独一天。那是 DateInput 的事。

示例

校验

Booking period

Selected dates are no longer available

Preferred period

High demand — limited availability

Confirmed period

Dates confirmed and available

已填区间上的错误、警告和成功。

带预设

No range selected

Report period

Use a preset or pick a custom range

最近 7、14、30、90 天的预设，也可以自己选区间。