简体中文
CalendarPicker 日历选择器
以天、周、月、季度或年为周期浏览并选择一个或多个日期，也可以在日期格中展示日程内容。
用法
选择日期
2026年9月
一二三四五六日
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
组件结构
加粗的是必需部件。
data-scope="calendar-picker"：root · header · prev-year-trigger · prev-trigger · next-trigger · next-year-trigger · heading · heading-year-trigger · heading-month-trigger · grid · grid-head · week-day · grid-body · week-row · week-number · cell · cell-trigger
示例
多选
selection-mode=multiple：点击一次加入，再点击一次移除，集合按日期升序
2026年9月
一二三四五六日
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
不可选的日期
isDateUnavailable 与 min / max 都只阻止落值不阻止聚焦：方向键照常可以经过
2026年11月
一二三四五六日
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
格子内放置内容
cell-trigger 的内容全部由作者编写，日号之外还可挂一枚徽标
2026年11月
一二三四五六日
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
周首日
firstDayOfWeek 单独改周首日：locale 仍是 en-US，月份与星期名照旧是英文，表头与每一行改从星期一排起
September 2026
MTWTFSS
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
限定多选数量
max-selected=3：选满后其余日子不可再加选，点掉一个即腾出名额
2026年9月
一二三四五六日
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
设计指引
何时使用
- 需要先看到整段时间的分布再选择日期：日程、排班、可预约情况。
- 需要在格子中显示当天的事件。
- 需要一次选择多个不连续的日期。
何时不用
特性
- 标准结构由标题栏、前后翻页按钮、星期表头和日期网格组成；网格数据通过插槽作用域交给作者渲染。
granularity决定周期格的生成方式，selectionMode独立决定单选或多选；两个维度互不绑定。- 五种粒度统一产出
CalendarPeriod：稳定键、周期首尾、标签与相邻容器标记都来自同一份数据。 week是一级粒度，使用一行一个整周的网格；不通过日格高亮模拟整周选择。- 周、月、季度与年这几层同样按行渲染：插槽里的
rows（多面板读panels[i].rows）已按列数切好——周一行一格，月与年一行三格，季度一行四格；一行写一个week-row，格子放进行里。网格是role=grid，行承担role=row，格子不直接铺进网格。 isDateUnavailable与min/max只阻止取值，不阻止聚焦；粗粒度周期越过任一边界时整格不可选。- 多选时
maxSelected限定最多选几个周期：选满后没选中的格子转为不可用（仍可聚焦），已选的点掉一个即腾出名额。它只拦用户的加选，setValue与受控值原样收下。 - 支持固定六行与显式多面板；翻页时整个视窗一起移动。
- 日期是 24px 见方的圆，月份、季度与年份格铺满格宽；按下只换底色，命中区铺满整格，点在格子边缘同样选中。
- 年份网格采用三列紧凑滚动面，可由作者按业务上下界铺入连续年份，复用日历格的选中与键盘语义；自备的年份列表用
calendarPeriodRows切成行。 calendarPeriodValue将选中的周期转换为{ granularity, start, end, keys }，可直接用于查询参数。- 切换粒度会清空旧选择并保留浏览锚点，避免不同周期键之间发生隐式转换。
- 周首日、月份名与星期名跟随
locale：en-US周日起、zh-CN周一起。未提供locale时跟随宿主浏览器语言，读取失败时使用en-US；需要固定排法时显式传入locale。 firstDayOfWeek（0 = 星期日 … 6 = 星期六，与热力图同一套写法）单独改周首日：表头、每一行的行首与 Home / End 跟着它走，月份名与星期名仍按locale。- 星期表头缺省只写一个字（
weekdayFormat为narrow，中文「一 二 三」、英文「M T W」）：「周一」这类缩写几乎占满格宽，表头挤在一起和日期数字争视线。需要缩写时设为short；表头的读屏名称始终是星期全称。 week粒度按 ISO 周（星期一到星期日）成段，周序号也按 ISO 周计，与locale和firstDayOfWeek都无关。以星期日开头的 locale（如en-US）下，日视图的一行比 ISO 周早一天开始，行首的周序号取这一行中间那天所在的 ISO 周；要让日视图的每一行正好是一个 ISO 周，把firstDayOfWeek设为 1。
组合
最佳实践
- 今天在数字下方标一颗品牌色圆点、数字保持正文色，选中使用实心强调面，两种状态必须能同时辨认。
- 多选时使用
aria-multiselectable告知读屏用户可以多选，不依赖视觉提示。 - 设了
maxSelected时在日历旁写明「已选几个 / 上限」：选满后格子只是转为不可用，本身不说明原因。 - 格子中的内容超出时收起，避免某一行明显高于其他行。
反模式
- 把周、月、季度或年的格子直接铺进网格：网格底下没有行，读屏报不出格子落在第几行第几列。
- 不可选的日期无法聚焦，键盘用户无从知道该位置的内容。
- 将它用作日期输入框。
- 用多选模拟区间：中间的日期不会自动补齐，也没有拖选与预览。
API 参考
产物
| 层 | 值 |
|---|---|
| 自定义元素 | <xh-calendar-picker> |
| Vue 组件 | XhCalendarPickerCell XhCalendarPickerCellTrigger XhCalendarPickerGrid XhCalendarPickerGridBody XhCalendarPickerGridHead XhCalendarPickerHeader XhCalendarPickerHeading XhCalendarPickerHeadingMonthTrigger XhCalendarPickerHeadingYearTrigger XhCalendarPickerNextTrigger XhCalendarPickerNextYearTrigger XhCalendarPickerPrevTrigger XhCalendarPickerPrevYearTrigger XhCalendarPickerRoot XhCalendarPickerWeekDay XhCalendarPickerWeekNumber XhCalendarPickerWeekRow |
| 组合式函数 | useCalendarPicker |
| 状态机 | calendarPickerMachine |
| 皮肤 | @xihan-ui/styles/calendar-picker.css |
事件
自定义元素将载荷放在 detail；Vue 使用同名 emit。
| 事件 | 载荷 | 说明 |
|---|---|---|
value-change | CalendarPickerValueChangeDetails | 选中集合变化；detail 为 { value: string[] } |
focused-value-change | CalendarFocusChangeDetails | 聚焦日变化；detail 为 { focusedValue: string } |
active-view-change | CalendarViewChangeDetails | 切换到另一层级；detail 为 { activeView: 'day'|'week'|'month'|'quarter'|'year' } |
插槽
仅列出带载荷的插槽。
| Vue 组件 | 插槽 | 载荷 | 说明 |
|---|---|---|---|
XhCalendarPickerRoot | default | CalendarPickerRootSlotProps |
React 适配器 props
只列各组件自己声明的那些：继承自 ComponentPropsWithRef 的 DOM 属性不在其中，根组件上与上面 Props 表同名的也不重复列。Vue 的对应物是上面的插槽表。
| React 组件 | 属性 | 类型 | 必填 | 说明 |
|---|---|---|---|---|
XhCalendarPickerCell | value | string | 是 | ISO 日期串。 |
XhCalendarPickerCell | index | number | 属于第几个面板，默认 0。多面板时必须提供：同一天会同时出现在两个面板中 （8 月末的几天也铺在 9 月的首行），是否为本月只有连同面板一起看才能判定。 | |
XhCalendarPickerGrid | index | number | 属于第几个面板，默认 0。单面板时不必写。 | |
XhCalendarPickerHeading | index | number | 属于第几个面板，默认 0。单面板时不必写。 | |
XhCalendarPickerHeadingMonthTrigger | index | number | 属于第几个面板，默认 0。单面板时不必写。 | |
XhCalendarPickerHeadingYearTrigger | index | number | 属于第几个面板，默认 0。单面板时不必写。 | |
XhCalendarPickerRoot | value | string | string[] | ||
XhCalendarPickerRoot | defaultValue | string | string[] | ||
XhCalendarPickerRoot | selectionMode | CalendarPickerSelectionMode | ||
XhCalendarPickerRoot | maxSelected | number | multiple 下最多选几个周期；选满后没选中的格子不可再加选。 | |
XhCalendarPickerRoot | focusedValue | string | ||
XhCalendarPickerRoot | defaultFocusedValue | string | ||
XhCalendarPickerRoot | min | string | ||
XhCalendarPickerRoot | max | string | ||
XhCalendarPickerRoot | isDateUnavailable | (value: string) => boolean | ||
XhCalendarPickerRoot | invalid | boolean | 校验失败：根带 data-invalid。 | |
XhCalendarPickerRoot | locale | string | ||
XhCalendarPickerRoot | firstDayOfWeek | number | 周首日，0 = 星期日 … 6 = 星期六；不给按 locale。 | |
XhCalendarPickerRoot | timeZone | string | ||
XhCalendarPickerRoot | disabled | boolean | ||
XhCalendarPickerRoot | readOnly | boolean | ||
XhCalendarPickerRoot | weekdayFormat | CalendarWeekdayFormat | ||
XhCalendarPickerRoot | fixedWeeks | boolean | ||
XhCalendarPickerRoot | granularity | CalendarGranularity | 选择粒度；与 selectionMode 正交。区间选择是另一个组件（XhCalendarRangePicker）。 | |
XhCalendarPickerRoot | activeView | CalendarView | 面板当前所处的层级；给定即受控，默认跟随 granularity。 | |
XhCalendarPickerRoot | defaultActiveView | CalendarView | 非受控初值，默认同 granularity。 | |
XhCalendarPickerRoot | visibleCount | number | 并排展示几页，默认 1。 | |
XhCalendarPickerRoot | translations | Partial<CalendarPickerTranslations> | ||
XhCalendarPickerRoot | onValueChange | CalendarPickerProps['onValueChange'] | ||
XhCalendarPickerRoot | onFocusedValueChange | CalendarPickerProps['onFocusedValueChange'] | ||
XhCalendarPickerRoot | onActiveViewChange | CalendarPickerProps['onActiveViewChange'] | ||
XhCalendarPickerRoot | children | SlotChildren<CalendarPickerRootSlotProps> | ||
XhCalendarPickerWeekDay | value | number | string | 是 | 列序 0-6，兼收字符串。 |
XhCalendarPickerWeekNumber | value | string | 是 | 该行行首那一天的 ISO 串。 |
状态
以下名称仅用于内部状态机。
状态：idle
事件：PRESS.START · PRESS.END
判据：canPress
connect API
getXxxProps() 返回对应部件的宿主属性。
| 成员 | 类型 | 说明 |
|---|---|---|
selectionMode | CalendarPickerSelectionMode | |
maxSelected | number | null | 实际生效的多选上限；single 或没设上限时为 null。 |
无障碍
键盘
规格出处：W3C APG
| 按键 | 生效条件 | 行为 |
|---|---|---|
Tab / Shift+Tab | focus outside the grid | 整张网格只占一个 Tab 位：焦点进入聚焦日那一格 |
ArrowLeft | focus in grid | 焦点前移一天；越过月首即翻到上一月并落在那一天。粗粒度视图里走一格（一个月 / 一季 / 一年） |
ArrowRight | focus in grid | 焦点后移一天；越过月末即翻到下一月并落在那一天。粗粒度视图里走一格 |
ArrowUp | focus in grid | 焦点上移一周（减七天），跨月照样翻页。粗粒度视图里上移一行 |
ArrowDown | focus in grid | 焦点下移一周（加七天），跨月照样翻页。粗粒度视图里下移一行 |
Home | focus in grid | 焦点移到本周第一天；周首日随 locale 变。粗粒度视图里移到本行头一格 |
End | focus in grid | 焦点移到本周最后一天。粗粒度视图里移到本行末一格 |
PageUp | focus in grid | 退一个月，日号不变（月末日被目标月夹住：3 月 31 日退成 2 月 29 日）。粗粒度视图里退一整页 |
PageDown | focus in grid | 进一个月，日号不变。粗粒度视图里进一整页 |
Shift+PageUp | focus in grid | 退一年；粗粒度视图里退十页 |
Shift+PageDown | focus in grid | 进一年；粗粒度视图里进十页 |
Enter / Space | focus in grid, 聚焦周期可用且非只读 | 选中聚焦周期：单选替换、多选切换。还没钻到 granularity 那一档时这一下是往下钻一层 |
Enter / Space | held in prev-year-trigger / prev-trigger / next-trigger / next-year-trigger / heading-year-trigger / heading-month-trigger / cell-trigger, 该部件可按 | 按住期间该部件投影 data-pressed，与指针 :active 同一副按压面；抬起或失焦撤下，按住途中整张转入禁用也撤下。整张禁用时谁都不进；只读时日期格不进（翻页与钻层照常）；到界的翻页钮与到顶的标题是原生 disabled，不可选的格子是 aria-disabled，都不进 |
ARIA
以下属性由 connect 生成。
| 部件 | 属性 | 值 |
|---|---|---|
prev-year-trigger | aria-label | translations.prevYearTrigger(view) |
prev-trigger | aria-label | translations.prevTrigger(view) |
next-trigger | aria-label | translations.nextTrigger(view) |
next-year-trigger | aria-label | translations.nextYearTrigger(view) |
grid | aria-disabled | 'true' | 'false' |
grid | aria-labelledby | frame.headingId(panel.index) |
grid | aria-multiselectable | 'true' | 'false' |
grid | aria-readonly | 'true' | 'false' |
grid | role | 'grid' |
grid-head | role | 'rowgroup' |
week-day | aria-label | meta?.long |
week-day | role | 'columnheader' |
grid-body | role | 'rowgroup' |
week-row | role | 'row' |
week-number | aria-hidden | 'true' |
week-number | role | 'rowheader' |
cell | aria-selected | 'true' | 'false' |
cell | role | 'gridcell' |
cell-trigger | aria-disabled | 'true' | 'false' |
cell-trigger | aria-label | frame.dateLabel(state.date, state.period) |
cell-trigger | role | 'button' |
样式参考
皮肤
@xihan-ui/styles/calendar-picker.css 按 [data-scope="calendar-picker"][data-part="root"] 部件选择器书写，发布产物以挂载类 .xh-scope-calendar-picker 代替其中的 data-scope（特异性相同），位于 xihan.components 层。覆盖样式使用 xihan.overrides，部件选择器照常可用。
forced-colors: active 下另有一套规则：颜色交给系统，边框与状态标记改用系统色关键字。
数据属性
由 connect 生成；条件不成立时不输出无值属性。
| 部件 | 属性 | 值 |
|---|---|---|
root | data-disabled | ''（条件成立时才出现） |
root | data-invalid | ''（条件成立时才出现） |
root | data-readonly | ''（条件成立时才出现） |
prev-year-trigger | data-disabled | ''（条件成立时才出现） |
prev-year-trigger | data-pressed | ''（条件成立时才出现） |
prev-year-trigger | data-xh-action-control | '' |
prev-year-trigger | data-xh-action-display | 'always' |
prev-year-trigger | data-xh-action-profile | 'icon' |
prev-year-trigger | data-xh-action-size | 'xs' |
prev-year-trigger | data-xh-action-variant | 'ghost' |
prev-trigger | data-disabled | ''（条件成立时才出现） |
prev-trigger | data-pressed | ''（条件成立时才出现） |
prev-trigger | data-xh-action-control | '' |
prev-trigger | data-xh-action-display | 'always' |
prev-trigger | data-xh-action-profile | 'icon' |
prev-trigger | data-xh-action-size | 'xs' |
prev-trigger | data-xh-action-variant | 'ghost' |
next-trigger | data-disabled | ''（条件成立时才出现） |
next-trigger | data-pressed | ''（条件成立时才出现） |
next-trigger | data-xh-action-control | '' |
next-trigger | data-xh-action-display | 'always' |
next-trigger | data-xh-action-profile | 'icon' |
next-trigger | data-xh-action-size | 'xs' |
next-trigger | data-xh-action-variant | 'ghost' |
next-year-trigger | data-disabled | ''（条件成立时才出现） |
next-year-trigger | data-pressed | ''（条件成立时才出现） |
next-year-trigger | data-xh-action-control | '' |
next-year-trigger | data-xh-action-display | 'always' |
next-year-trigger | data-xh-action-profile | 'icon' |
next-year-trigger | data-xh-action-size | 'xs' |
next-year-trigger | data-xh-action-variant | 'ghost' |
heading | data-index | frame.panelOf(panel).index |
heading | data-view | view |
heading-year-trigger | data-disabled | ''（条件成立时才出现） |
heading-year-trigger | data-index | frame.panelOf(panel).index |
heading-year-trigger | data-pressed | ''（条件成立时才出现） |
heading-year-trigger | data-view | view |
heading-year-trigger | data-xh-action-control | '' |
heading-year-trigger | data-xh-action-display | 'always' |
heading-year-trigger | data-xh-action-profile | 'text' |
heading-year-trigger | data-xh-action-size | 'xs' |
heading-year-trigger | data-xh-action-variant | 'ghost' |
heading-month-trigger | data-disabled | ''（条件成立时才出现） |
heading-month-trigger | data-index | frame.panelOf(panel).index |
heading-month-trigger | data-pressed | ''（条件成立时才出现） |
heading-month-trigger | data-view | view |
heading-month-trigger | data-xh-action-control | '' |
heading-month-trigger | data-xh-action-display | 'always' |
heading-month-trigger | data-xh-action-profile | 'text' |
heading-month-trigger | data-xh-action-size | 'xs' |
heading-month-trigger | data-xh-action-variant | 'ghost' |
grid | data-disabled | ''（条件成立时才出现） |
grid | data-index | frame.panelOf(panel).index |
grid | data-readonly | ''（条件成立时才出现） |
grid | data-view | view |
week-row | data-view | view |
cell | data-disabled | ''（条件成立时才出现） |
cell | data-focus | ''（条件成立时才出现） |
cell | data-outside-month | ''（条件成立时才出现） |
cell | data-selected | ''（条件成立时才出现） |
cell | data-today | ''（条件成立时才出现） |
cell | data-view | view |
cell-trigger | data-disabled | ''（条件成立时才出现） |
cell-trigger | data-focus | ''（条件成立时才出现） |
cell-trigger | data-outside-month | ''（条件成立时才出现） |
cell-trigger | data-pressed | ''（条件成立时才出现） |
cell-trigger | data-selected | ''（条件成立时才出现） |
cell-trigger | data-today | ''（条件成立时才出现） |
cell-trigger | data-view | view |
cell-trigger | data-xh-action-control | '' |
cell-trigger | data-xh-action-display | 'always' |
cell-trigger | data-xh-action-profile | 'text' |
cell-trigger | data-xh-action-size | 'xs' |
cell-trigger | data-xh-action-variant | 'ghost' |
CSS 变量
本组件公开覆盖槽由独立皮肤的实际消费位生成；默认来源、作用部件和状态均与 CSS 同源。
| 变量 | 部件 | CSS 属性 | 状态 | 默认来源 | 说明 |
|---|---|---|---|---|---|
--xh-calendar-picker-cell-bg-disabled | cell | background-color | disabled | --xh-bg-subtle | calendar-picker 的 cell 部件 background-color 覆盖槽。 |
--xh-calendar-picker-cell-bg-hover | cell-trigger | background-color | disabledhoverloadingnot([data-disabled])not([data-loading]) | --xh-_action-variant-bg-hover | calendar-picker 的 cell-trigger 部件 background-color 覆盖槽。 |
--xh-calendar-picker-cell-bg-pressed | cell-trigger | background-color | disabledis(:active, [data-pressed])loadingnot([data-disabled])not([data-loading])pressed | --xh-_action-variant-bg-pressed | calendar-picker 的 cell-trigger 部件 background-color 覆盖槽。 |
--xh-calendar-picker-cell-bg-selected | cell-trigger | --xh-ink-surfacebackground-color | disabledfocus-visiblehoverloadingnot([data-disabled])not([data-loading])selectedxh-ink-surface | --xh-bg-brand | calendar-picker 的 cell-trigger 部件 --xh-ink-surface、background-color 覆盖槽。 |
--xh-calendar-picker-cell-bg-selected-active | cell-trigger | background-color | disabledis(:active, [data-pressed])loadingnot([data-disabled])not([data-loading])pressedselected | --xh-bg-brand-active | calendar-picker 的 cell-trigger 部件 background-color 覆盖槽。 |
--xh-calendar-picker-cell-bg-selected-disabled | cell-trigger | --xh-ink-surfacebackground-color | disabledselectedxh-ink-surface | --xh-bg-subtle-hover | calendar-picker 的 cell-trigger 部件 --xh-ink-surface、background-color 覆盖槽。 |
--xh-calendar-picker-cell-fg | cell-trigger | color | @media printdefaultdisabledfocus-visiblehoveris(:active, [data-pressed])loadingnot([data-disabled])not([data-loading])pressedselected | --xh-fg-default | calendar-picker 的 cell-trigger 部件 color 覆盖槽。 |
--xh-calendar-picker-cell-fg-outside | cell-trigger | color | disabledfocus-visiblehoveris(:active, [data-pressed])loadingnot([data-disabled])not([data-loading])outside-monthpressed | --xh-fg-subtle | calendar-picker 的 cell-trigger 部件 color 覆盖槽。 |
--xh-calendar-picker-cell-fg-selected | cell-trigger | color | disabledfocus-visiblehoveris(:active, [data-pressed])loadingnot([data-disabled])not([data-loading])pressedselected | --xh-fg-on-brand | calendar-picker 的 cell-trigger 部件 color 覆盖槽。 |
--xh-calendar-picker-cell-font-size | cell-trigger | font-size | default | --xh-text-body-size | calendar-picker 的 cell-trigger 部件 font-size 覆盖槽。 |
--xh-calendar-picker-cell-font-weight | cell-trigger | font-weight | default | --xh-font-weight-medium | calendar-picker 的 cell-trigger 部件 font-weight 覆盖槽。 |
--xh-calendar-picker-cell-font-weight-outside | cell-trigger | font-weight | outside-month | --xh-font-weight-regular | calendar-picker 的 cell-trigger 部件 font-weight 覆盖槽。 |
--xh-calendar-picker-cell-min-w | gridweek-row | grid-template-columnsmin-inline-size | @media (pointer: coarse)defaulthas(> [data-part='week-number'])is([data-view='week'], [data-view='month'], [data-view='quarter'], [data-view='year'])not([hidden])view=monthview=quarterview=weekview=year | --xh-control-h-md | calendar-picker 的 grid、week-row 部件 grid-template-columns、min-inline-size 覆盖槽。 |
--xh-calendar-picker-cell-px | cell | padding-inline | default | --xh-space-0 | calendar-picker 的 cell 部件 padding-inline 覆盖槽。 |
--xh-calendar-picker-cell-py | cell | inset-blockpadding-block | defaultdisabled | --xh-space-1_5 | calendar-picker 的 cell 部件 inset-block、padding-block 覆盖槽。 |
--xh-calendar-picker-cell-radius | cell-trigger | border-radius | view=day | --xh-shape-circle | calendar-picker 的 cell-trigger 部件 border-radius 覆盖槽。 |
--xh-calendar-picker-cell-size | cellcell-trigger | block-sizeinline-sizeinset-blockinset-block-startmin-inline-size | defaultdisabledtodayxh-action-profile=icon | --xh-_action-profile-visual-size--xh-control-action-size | calendar-picker 的 cell、cell-trigger 部件 block-size、inline-size、inset-block、inset-block-start、min-inline-size 覆盖槽。 |
--xh-calendar-picker-disabled-inset | cell | inset-block | disabled | --xh-space-0_5 | calendar-picker 的 cell 部件 inset-block 覆盖槽。 |
--xh-calendar-picker-gap | root | gap | default | --xh-space-0 | calendar-picker 的 root 部件 gap 覆盖槽。 |
--xh-calendar-picker-grid-gap | grid | gap | default | --xh-space-0 | calendar-picker 的 grid 部件 gap 覆盖槽。 |
--xh-calendar-picker-grid-px | gridweek-row | grid-template-columnsmin-inline-sizepadding-inline | @media (pointer: coarse)defaulthas(> [data-part='week-number'])is([data-view='week'], [data-view='month'], [data-view='quarter'], [data-view='year'])not([hidden])view=monthview=quarterview=weekview=year | --xh-space-4 | calendar-picker 的 grid、week-row 部件 grid-template-columns、min-inline-size、padding-inline 覆盖槽。 |
--xh-calendar-picker-grid-py | grid | padding-block | default | --xh-space-3 | calendar-picker 的 grid 部件 padding-block 覆盖槽。 |
--xh-calendar-picker-header-border | header | border-block-end | default | --xh-material-solid-border | calendar-picker 的 header 部件 border-block-end 覆盖槽。 |
--xh-calendar-picker-header-gap | header | gap | default | --xh-space-1 | calendar-picker 的 header 部件 gap 覆盖槽。 |
--xh-calendar-picker-header-px | header | padding-inline | default | --xh-space-4 | calendar-picker 的 header 部件 padding-inline 覆盖槽。 |
--xh-calendar-picker-header-py | header | min-block-sizepadding-block | default | --xh-space-2 | calendar-picker 的 header 部件 min-block-size、padding-block 覆盖槽。 |
--xh-calendar-picker-heading-fg | headingheading-month-triggerheading-year-trigger | color | defaultdisabledfocus-visiblehoveris(:active, [data-pressed])loadingnot([data-disabled])not([data-loading])not([hidden])pressed | --xh-fg-default | calendar-picker 的 heading、heading-month-trigger、heading-year-trigger 部件 color 覆盖槽。 |
--xh-calendar-picker-heading-font-size | headingheading-month-triggerheading-year-trigger | font-size | defaultnot([hidden]) | --xh-text-label-size | calendar-picker 的 heading、heading-month-trigger、heading-year-trigger 部件 font-size 覆盖槽。 |
--xh-calendar-picker-heading-font-weight | headingheading-month-triggerheading-year-trigger | font-weight | defaultnot([hidden]) | --xh-font-weight-medium | calendar-picker 的 heading、heading-month-trigger、heading-year-trigger 部件 font-weight 覆盖槽。 |
--xh-calendar-picker-heading-trigger-bg-hover | heading-month-triggerheading-year-trigger | background-color | disabledhoverloadingnot([data-disabled])not([data-loading])not([hidden]) | --xh-_action-variant-bg-hover | calendar-picker 的 heading-month-trigger、heading-year-trigger 部件 background-color 覆盖槽。 |
--xh-calendar-picker-heading-trigger-bg-pressed | heading-month-triggerheading-year-trigger | background-color | disabledis(:active, [data-pressed])loadingnot([data-disabled])not([data-loading])not([hidden])pressed | --xh-_action-variant-bg-pressed | calendar-picker 的 heading-month-trigger、heading-year-trigger 部件 background-color 覆盖槽。 |
--xh-calendar-picker-heading-trigger-px | heading-month-triggerheading-year-trigger | padding-inline | not([hidden]) | --xh-space-0_5 | calendar-picker 的 heading-month-trigger、heading-year-trigger 部件 padding-inline 覆盖槽。 |
--xh-calendar-picker-heading-trigger-radius | heading-month-triggerheading-year-trigger | border-radius | not([hidden]) | --xh-shape-control | calendar-picker 的 heading-month-trigger、heading-year-trigger 部件 border-radius 覆盖槽。 |
--xh-calendar-picker-icon-size | header | --xh-icon-size | default | --xh-glyph-size-sm | calendar-picker 的 header 部件 --xh-icon-size 覆盖槽。 |
--xh-calendar-picker-nav-bg | next-triggernext-year-triggerprev-triggerprev-year-trigger | --xh-ink-surfacebackground-color | defaultfocus-visiblexh-ink-surface | --xh-_action-variant-bg-focus-visible--xh-_action-variant-bg-rest | calendar-picker 的 next-trigger、next-year-trigger、prev-trigger、prev-year-trigger 部件 --xh-ink-surface、background-color 覆盖槽。 |
--xh-calendar-picker-nav-bg-hover | next-triggernext-year-triggerprev-triggerprev-year-trigger | background-color | disabledhoverloadingnot([data-disabled])not([data-loading]) | --xh-_action-variant-bg-hover | calendar-picker 的 next-trigger、next-year-trigger、prev-trigger、prev-year-trigger 部件 background-color 覆盖槽。 |
--xh-calendar-picker-nav-bg-pressed | next-triggernext-year-triggerprev-triggerprev-year-trigger | background-color | disabledis(:active, [data-pressed])loadingnot([data-disabled])not([data-loading])pressed | --xh-_action-variant-bg-pressed | calendar-picker 的 next-trigger、next-year-trigger、prev-trigger、prev-year-trigger 部件 background-color 覆盖槽。 |
--xh-calendar-picker-nav-fg | next-triggernext-year-triggerprev-triggerprev-year-trigger | color | defaultfocus-visible | --xh-fg-muted | calendar-picker 的 next-trigger、next-year-trigger、prev-trigger、prev-year-trigger 部件 color 覆盖槽。 |
--xh-calendar-picker-nav-fg-hover | next-triggernext-year-triggerprev-triggerprev-year-trigger | color | disabledhoveris(:active, [data-pressed])loadingnot([data-disabled])not([data-loading])pressed | --xh-fg-default | calendar-picker 的 next-trigger、next-year-trigger、prev-trigger、prev-year-trigger 部件 color 覆盖槽。 |
--xh-calendar-picker-nav-radius | next-triggernext-year-triggerprev-triggerprev-year-trigger | border-radius | default | --xh-shape-circle | calendar-picker 的 next-trigger、next-year-trigger、prev-trigger、prev-year-trigger 部件 border-radius 覆盖槽。 |
--xh-calendar-picker-nav-size | next-triggernext-year-triggerprev-triggerprev-year-trigger | block-sizeinline-sizemin-inline-size | defaultxh-action-profile=icon | --xh-_action-profile-visual-size | calendar-picker 的 next-trigger、next-year-trigger、prev-trigger、prev-year-trigger 部件 block-size、inline-size、min-inline-size 覆盖槽。 |
--xh-calendar-picker-period-gap | gridweek-row | column-gapgap | is([data-view='month'], [data-view='year'])is([data-view='week'], [data-view='month'], [data-view='quarter'], [data-view='year'])view=monthview=quarterview=weekview=year | --xh-space-0 | calendar-picker 的 grid、week-row 部件 column-gap、gap 覆盖槽。 |
--xh-calendar-picker-period-px | cell | padding-inline | is([data-view='week'], [data-view='month'], [data-view='quarter'], [data-view='year'])view=monthview=quarterview=weekview=year | --xh-space-1 | calendar-picker 的 cell 部件 padding-inline 覆盖槽。 |
--xh-calendar-picker-period-radius | cell-trigger | border-radius | default | --xh-shape-control | calendar-picker 的 cell-trigger 部件 border-radius 覆盖槽。 |
--xh-calendar-picker-row-gap | grid-bodygrid-head | gap | default | --xh-space-0 | calendar-picker 的 grid-body、grid-head 部件 gap 覆盖槽。 |
--xh-calendar-picker-today-mark-bg | cell | background-color | today | --xh-fg-brand | calendar-picker 的 cell 部件 background-color 覆盖槽。 |
--xh-calendar-picker-today-mark-size | cell | block-sizeborderinline-size | @media printtoday | --xh-space-1 | calendar-picker 的 cell 部件 block-size、border、inline-size 覆盖槽。 |
--xh-calendar-picker-week-cell-px | cell-trigger | padding-inline | view=week | --xh-space-3 | calendar-picker 的 cell-trigger 部件 padding-inline 覆盖槽。 |
--xh-calendar-picker-week-day-fg | week-day | color | default | --xh-fg-subtle | calendar-picker 的 week-day 部件 color 覆盖槽。 |
--xh-calendar-picker-week-day-font-size | week-day | font-size | default | --xh-text-body-size | calendar-picker 的 week-day 部件 font-size 覆盖槽。 |
--xh-calendar-picker-week-day-font-weight | week-day | font-weight | default | --xh-font-weight-regular | calendar-picker 的 week-day 部件 font-weight 覆盖槽。 |
--xh-calendar-picker-week-day-h | week-day | block-size | default | --xh-control-h-md | calendar-picker 的 week-day 部件 block-size 覆盖槽。 |
--xh-calendar-picker-week-number-fg | week-number | color | default | --xh-fg-subtle | calendar-picker 的 week-number 部件 color 覆盖槽。 |
--xh-calendar-picker-week-number-font-size | week-number | font-size | default | --xh-text-caption-size | calendar-picker 的 week-number 部件 font-size 覆盖槽。 |
--xh-calendar-picker-week-number-w | week-row | grid-template-columns | @media (pointer: coarse)has(> [data-part='week-number'])not([hidden]) | --xh-control-h-md | calendar-picker 的 week-row 部件 grid-template-columns 覆盖槽。 |
--xh-calendar-picker-year-grid-max-h | grid | max-block-size | view=year | --xh-viewport-h-sm | calendar-picker 的 grid 部件 max-block-size 覆盖槽。 |
动效
动效角色：按压 · 状态（见动效规范）。
本组件皮肤不含过渡与关键帧，也没有脚本驱动的动效：状态一变，外观立即到位。
响应式
皮肤另按输入能力分档：pointer: coarse：同一份皮肤在触屏与带指针的设备上不一样，与视口宽度无关。
RTL
皮肤用逻辑属性排布（inline-start 一族），dir="rtl" 下自动镜像；另有按 dir 分支的规则。