组件
日期选择器 Date Picker
DatePicker：日期选择器。弹层带 elevation 淡入，选中的日期使用墨色平铺填充，范围中间的日期以切角弱化显示。部件：Root、Label、Control、Input、Trigger、ClearTrigger、Positioner、Content、View、ViewControl、ViewTrigger、RangeText、PrevTrigger、NextTrigger、Table*、MonthSelect、YearSelect、PresetTrigger。
#基础用法
<script setup lang="ts">
import { calendar, chevron_right } from "@bysages/icons";
import { DatePicker, Icon } from "@bysages/vue";
</script>
<template>
<DatePicker.Root>
<DatePicker.Label>Start date</DatePicker.Label>
<DatePicker.Control>
<DatePicker.Input />
<DatePicker.Trigger>
<Icon :glyph="calendar" />
</DatePicker.Trigger>
</DatePicker.Control>
<Teleport to="body">
<DatePicker.Positioner>
<DatePicker.Content>
<DatePicker.View view="day">
<DatePicker.Context v-slot="dp">
<DatePicker.ViewControl>
<DatePicker.PrevTrigger>
<Icon :glyph="chevron_right" />
</DatePicker.PrevTrigger>
<DatePicker.ViewTrigger><DatePicker.RangeText /></DatePicker.ViewTrigger>
<DatePicker.NextTrigger>
<Icon :glyph="chevron_right" />
</DatePicker.NextTrigger>
</DatePicker.ViewControl>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableRow>
<DatePicker.TableHeader
v-for="(day, i) in dp.weekDays"
:key="i"
:aria-label="day.long"
>
{{ day.narrow }}
</DatePicker.TableHeader>
</DatePicker.TableRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
<DatePicker.TableRow v-for="(week, i) in dp.weeks" :key="i">
<DatePicker.TableCell v-for="(day, j) in week" :key="j" :value="day">
<DatePicker.TableCellTrigger>{{ day.day }}</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
</DatePicker.TableRow>
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Context>
</DatePicker.View>
<DatePicker.View view="month">
<DatePicker.Context v-slot="dp">
<DatePicker.ViewControl>
<DatePicker.PrevTrigger>
<Icon :glyph="chevron_right" />
</DatePicker.PrevTrigger>
<DatePicker.ViewTrigger><DatePicker.RangeText /></DatePicker.ViewTrigger>
<DatePicker.NextTrigger>
<Icon :glyph="chevron_right" />
</DatePicker.NextTrigger>
</DatePicker.ViewControl>
<DatePicker.Table>
<DatePicker.TableBody>
<DatePicker.TableRow
v-for="(months, i) in dp.getMonthsGrid({ columns: 4 })"
:key="i"
>
<DatePicker.TableCell
v-for="(month, j) in months"
:key="j"
:value="month.value"
>
<DatePicker.TableCellTrigger>{{ month.label }}</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
</DatePicker.TableRow>
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Context>
</DatePicker.View>
<DatePicker.View view="year">
<DatePicker.Context v-slot="dp">
<DatePicker.ViewControl>
<DatePicker.PrevTrigger>
<Icon :glyph="chevron_right" />
</DatePicker.PrevTrigger>
<DatePicker.ViewTrigger><DatePicker.RangeText /></DatePicker.ViewTrigger>
<DatePicker.NextTrigger>
<Icon :glyph="chevron_right" />
</DatePicker.NextTrigger>
</DatePicker.ViewControl>
<DatePicker.Table>
<DatePicker.TableBody>
<DatePicker.TableRow
v-for="(years, i) in dp.getYearsGrid({ columns: 4 })"
:key="i"
>
<DatePicker.TableCell v-for="(year, j) in years" :key="j" :value="year.value">
<DatePicker.TableCellTrigger>{{ year.label }}</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
</DatePicker.TableRow>
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Context>
</DatePicker.View>
</DatePicker.Content>
</DatePicker.Positioner>
</Teleport>
</DatePicker.Root>
</template>
#属性
#ClearTrigger
纯造型的部件——自身没有属性，沿用部件结构的共享样式。
#Content
纯造型的部件——自身没有属性，沿用部件结构的共享样式。
#Control
纯造型的部件——自身没有属性，沿用部件结构的共享样式。
#Input
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
fixOnBlur | boolean | undefined | true | 失焦时是否修正输入值 |
index | number | undefined | 要聚焦的输入框索引 |
#Label
纯造型的部件——自身没有属性，沿用部件结构的共享样式。
#MonthSelect
纯造型的部件——自身没有属性，沿用部件结构的共享样式。
#NextTrigger
纯造型的部件——自身没有属性，沿用部件结构的共享样式。
#Positioner
纯造型的部件——自身没有属性，沿用部件结构的共享样式。
#PresetTrigger
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
value | PresetTriggerValue | — |
#PrevTrigger
纯造型的部件——自身没有属性，沿用部件结构的共享样式。
#RangeText
纯造型的部件——自身没有属性，沿用部件结构的共享样式。
#Root
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
size | String as PropType<"sm" | "md" | "lg"> | "md" | 字段行高度，可为 sm、md 或 lg |
closeOnSelect | boolean | true | 日期选择完成后是否关闭日历；选择模式为 multiple 时忽略 |
createCalendar | (identifier: datePicker.CalendarIdentifier) => datePicker.Calendar | 根据日历标识创建 Calendar 对象的函数；用于支持波斯历、佛历、伊斯兰历等非公历，避免默认打包所有日历；示例：import { createCalendar } from "@internationalized/date" { locale: "fa-IR", createCalendar } | |
defaultFocusedValue | datePicker.DateValue | 初始焦点日期；无需控制日期选择器的焦点日期时使用 | |
defaultOpen | boolean | 日期选择器初始是否展开；无需控制展开状态时使用 | |
defaultValue | datePicker.DateValue[] | 初始选中日期；无需控制日期选择器的选中日期时使用 | |
defaultView | datePicker.DateView | "day" | 日历默认视图 |
disabled | boolean | 日历是否禁用 | |
fixedWeeks | boolean | 日历是否固定为 6 周；固定时不随月份在 5 周和 6 周间变化 | |
focusedValue | datePicker.DateValue | 受控的焦点日期 | |
format | (date: datePicker.DateValue, details: datePicker.LocaleDetails) => string | 输入框中显示的日期格式 | |
id | string | 组件内部状态机的唯一标识 | |
ids | Partial<{ root: string; label(index: number): string; table(id: string): string; tableHeader(id: string): string; tableBody(id: string): string; tableRow(id: string): string; content: string; cellTrigger(id: string): string; prevTrigger(view: datePicker.DateView): string; nextTrigger(view: datePicker.DateView): string; viewTrigger(view: datePicker.DateView): string; clearTrigger: string; control: string; input(index: number): string; trigger: string; monthSelect: string; yearSelect: string; positioner: string; }> | 日期选择器内各元素的 id；便于组合使用 | |
inline | boolean | 日期选择器是否内联 | |
invalid | boolean | 日期选择器是否无效 | |
isDateUnavailable | (date: datePicker.DateValue, locale: string) => boolean | 判断日历中某个日期是否可选的函数 | |
locale | string | "en-US" | 格式化日期时使用的区域设置（BCP 47 语言标签） |
max | datePicker.DateValue | 可选的最大日期 | |
maxSelectedDates | number | 最多可选日期数；仅在 selectionMode 为 multiple 时生效 | |
maxView | datePicker.DateView | "year" | 日历允许的最大视图 |
min | datePicker.DateValue | 可选的最小日期 | |
minView | datePicker.DateView | "day" | 日历允许的最小视图 |
modelValue | datePicker.DateValue[] | 日期选择器的 v-model 值 | |
name | string | 输入框的 name 属性 | |
numOfMonths | number | 显示的月份数 | |
open | boolean | 日期选择器的受控展开状态 | |
openOnClick | boolean | false | 点击输入框时是否打开日历 |
outsideDaySelectable | boolean | false | 可见范围外的日期是否可选 |
parse | (value: string, details: datePicker.LocaleDetails) => datePicker.DateValue | undefined | 把输入内容解析回 DateValue 的函数 | |
placeholder | string | 输入框的占位文本 | |
positioning | datePicker.PositioningOptions | 使用者提供的日期选择器内容定位选项 | |
readOnly | boolean | 日历是否只读 | |
required | boolean | 日期选择器是否必填 | |
selectionMode | datePicker.SelectionMode | "single" | 日历的选择模式：single 表示只能选择一个日期；multiple 表示可以选择多个日期；range 表示可以选择日期范围 |
showWeekNumbers | boolean | 日视图中是否显示周数列 | |
startOfWeek | number | 每周第一天：0 表示周日，1 表示周一，2 表示周二，3 表示周三，4 表示周四，5 表示周五，6 表示周六 | |
timeZone | string | "UTC" | 使用的时区 |
translations | datePicker.IntlTranslations | 本地化文案 | |
view | datePicker.DateView | 日历视图 |
#TableBody
纯造型的部件——自身没有属性，沿用部件结构的共享样式。
#TableCellTrigger
纯造型的部件——自身没有属性，沿用部件结构的共享样式。
#TableCell
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
value | Reactive<number | DateValue> | — |
#TableHead
纯造型的部件——自身没有属性，沿用部件结构的共享样式。
#TableHeader
纯造型的部件——自身没有属性，沿用部件结构的共享样式。
#TableRow
纯造型的部件——自身没有属性，沿用部件结构的共享样式。
#Table
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
columns | number | undefined | — | |
id | string | undefined | — | |
view | DateView | undefined | — |
#Trigger
纯造型的部件——自身没有属性，沿用部件结构的共享样式。
#ValueText
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
placeholder | string | undefined | 未选择日期时显示的文本 | |
separator | string | undefined | ", " | 默认渲染时多个日期值之间的分隔符 |
#ViewControl
纯造型的部件——自身没有属性，沿用部件结构的共享样式。
#ViewTrigger
纯造型的部件——自身没有属性，沿用部件结构的共享样式。
#View
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
view | DateView | — |
#WeekNumberCell
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
week | DateValue[] | — | |
weekIndex | number | — |
#WeekNumberHeaderCell
纯造型的部件——自身没有属性，沿用部件结构的共享样式。
#YearSelect
纯造型的部件——自身没有属性，沿用部件结构的共享样式。