简体中文
CalendarRangePicker 日历范围选择器
在日历网格中先选起点再选终点，选出一段连续的天、周、月、季度或年。
用法
先落下起点再落下终点，也可以按住拖动经过；两端都落定才写值，Escape 撤销起点
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
组件结构
加粗的是必需部件。
data-scope="calendar-range-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
示例
并排两个月
visible-count=2：起止常跨月，并排查看两页更便于选择；翻页时整个窗口一起移动
2026年9月
2026年10月
一二三四五六日
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
一二三四五六日
28
29
30
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
31
1
2
3
4
5
6
7
8
不可用的日期
allows-non-contiguous-ranges 允许区间跨过周末，只是这些日期不铺设轨道；isDateUnavailable 可得到起点，据此限制区间长度
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
按周选择
granularity=week：rows 已按行切好，周视图一行一个整周，每行写一个 week-row；值是两端两周的周首日；月、季度与年同理
2026年11月
W44 10/26–11/01
W45 11/02–11/08
W46 11/09–11/15
W47 11/16–11/22
W48 11/23–11/29
W49 11/30–12/06
只改终点
activeIndex=1 时起点当锚：点在起点之后只改终点，点在起点之前从那一天重新开始挑
2026年10月
一二三四五六日
28
29
30
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
31
1
2
3
4
5
6
7
8
设计指引
何时使用
- 需要查看整月分布再选择一段起止：预订入住与退房、报表统计区间、排班周期。
- 起止常跨月，需要并排查看两个月再决定。
何时不用
特性
- 先选起点再选终点：起点只记录在组件内，两端都落定后才写值；Escape 撤销起点后原区间保持不变。
- 支持按住拖选：按下即落起点，拖到另一格松开即完成；按住已选区间的一端拖动可以直接改写该端；触屏按住片刻才开始拖动，轻点仍是普通点选。
- 焦点离开网格时，未完成的区间在起点到聚焦日之间就地收口，不留悬空的起点。
activeIndex={1}时只改终点：已有起点当锚，点在起点当天或之后即落终点、起点不动；点在起点之前的日子从那一天重新开始挑。与 antd 的「从终点输入框继续改」一致；React Aria 的区间日历每次点选都重新开始，没有这一档。- 落起点后可选范围默认被夹在两侧最近的不可用日之间，
allowsNonContiguousRanges允许跨过它们；isDateUnavailable的第二个参数是当前起点，可据此限制区间长度。 - 已选区间的任一端越界或不可用即标记为不合法，也可以用
invalid显式声明。 granularity决定周期格的生成方式；周、月、季度和年区间共用同一套 Period 边界判断。- 周、月、季度与年这几层同样按行渲染：插槽里的
rows（多面板读panels[i].rows）已按列数切好——周一行一格，月与年一行三格，季度一行四格；一行写一个week-row，格子放进行里。网格是role=grid，行承担role=row，格子不直接铺进网格。 visibleCount并排展示连续的月份，翻页时整个视窗一起移动；起止常跨月时建议为 2。多个面板始终联动、一起翻页，不提供解绑（Element Plus 的unlink-panels那一档）：两张月历各翻各的之后，方向键跨出一张月历时焦点该落到哪一张、另一张跟不跟着走都没有一致的答案，读屏用户也失去「这几张是连续的月」这条线索。起止相隔很远时点标题里的年 / 月直接跳，或在输入行键入；React Aria 的visibleDuration同样只有联动一种。calendarPeriodValue将两端转换为{ granularity, start, end, keys }，可直接用于查询参数。- 周首日、月份名与星期名跟随
locale，与日历选择器使用同一套解析链；firstDayOfWeek（0 = 星期日 … 6 = 星期六）单独改周首日，月份名与星期名仍按locale。星期表头缺省只写一个字（weekdayFormat为narrow），需要缩写时设为short，读屏名称始终是星期全称。 week粒度按 ISO 周（星期一到星期日）成段，周序号也按 ISO 周计，与locale和firstDayOfWeek都无关。以星期日开头的 locale（如en-US）下，日视图的一行比 ISO 周早一天开始，行首的周序号取这一行中间那天所在的 ISO 周；要让日视图的每一行正好是一个 ISO 周，把firstDayOfWeek设为 1。
组合
最佳实践
- 区间中段保持连续淡色带，起止使用实心端点；挑到一半的预览铺中性淡底，落定时淡变成品牌淡底——品牌淡底专属选中，还没确认的一段不借用它。悬停预览不显示独立的普通悬停样式。
- 今天在数字下方标一颗品牌色圆点、数字保持正文色，落在区间里时圆点压在淡色带的下沿，仍与起止端点的实心面分得开。
- 周区间按整周格连续预览，月份、季度和年份区间共用同一套 Period 边界判断。
- 落起点后把焦点移动一格，让键盘用户看出正在选择一段而不是一天。
- 起止常跨月时设置
visibleCount="2"，避免用户来回翻页。
反模式
- 把周、月、季度或年的格子直接铺进网格：网格底下没有行，读屏报不出格子落在第几行第几列。
- 用两个日历选择器分别选起止：中间的日期不铺轨道，也没有拖选与预览。
- 不可选的日期无法聚焦，键盘用户无从知道该位置的内容。
API 参考
产物
| 层 | 值 |
|---|---|
| 自定义元素 | <xh-calendar-range-picker> |
| Vue 组件 | XhCalendarRangePickerCell XhCalendarRangePickerCellTrigger XhCalendarRangePickerGrid XhCalendarRangePickerGridBody XhCalendarRangePickerGridHead XhCalendarRangePickerHeader XhCalendarRangePickerHeading XhCalendarRangePickerHeadingMonthTrigger XhCalendarRangePickerHeadingYearTrigger XhCalendarRangePickerNextTrigger XhCalendarRangePickerNextYearTrigger XhCalendarRangePickerPrevTrigger XhCalendarRangePickerPrevYearTrigger XhCalendarRangePickerRoot XhCalendarRangePickerWeekDay XhCalendarRangePickerWeekNumber XhCalendarRangePickerWeekRow |
| 组合式函数 | useCalendarRangePicker |
| 状态机 | calendarRangePickerMachine |
| 皮肤 | @xihan-ui/styles/calendar-range-picker.css |
事件
自定义元素将载荷放在 detail；Vue 使用同名 emit。
| 事件 | 载荷 | 说明 |
|---|---|---|
value-change | CalendarRangePickerValueChangeDetails | 区间两端都落定；detail 为 { value: string[] }，长度恒为 2 |
focused-value-change | CalendarFocusChangeDetails | 聚焦日变化；detail 为 { focusedValue: string } |
active-view-change | CalendarViewChangeDetails | 切换到另一层级；detail 为 { activeView: 'day'|'week'|'month'|'quarter'|'year' } |
插槽
仅列出带载荷的插槽。
| Vue 组件 | 插槽 | 载荷 | 说明 |
|---|---|---|---|
XhCalendarRangePickerRoot | default | CalendarRangePickerRootSlotProps |
React 适配器 props
只列各组件自己声明的那些：继承自 ComponentPropsWithRef 的 DOM 属性不在其中，根组件上与上面 Props 表同名的也不重复列。Vue 的对应物是上面的插槽表。
| React 组件 | 属性 | 类型 | 必填 | 说明 |
|---|---|---|---|---|
XhCalendarRangePickerCell | value | string | 是 | ISO 日期串。 |
XhCalendarRangePickerCell | index | number | 属于第几个面板，默认 0。多面板时必须提供：同一天会同时出现在两个面板中 （8 月末的几天也铺在 9 月的首行），是否为本月只有连同面板一起看才能判定。 | |
XhCalendarRangePickerGrid | index | number | 属于第几个面板，默认 0。单面板时不必写。 | |
XhCalendarRangePickerHeading | index | number | 属于第几个面板，默认 0。单面板时不必写。 | |
XhCalendarRangePickerHeadingMonthTrigger | index | number | 属于第几个面板，默认 0。单面板时不必写。 | |
XhCalendarRangePickerHeadingYearTrigger | index | number | 属于第几个面板，默认 0。单面板时不必写。 | |
XhCalendarRangePickerRoot | value | string | string[] | ||
XhCalendarRangePickerRoot | defaultValue | string | string[] | ||
XhCalendarRangePickerRoot | focusedValue | string | ||
XhCalendarRangePickerRoot | defaultFocusedValue | string | ||
XhCalendarRangePickerRoot | min | string | ||
XhCalendarRangePickerRoot | max | string | ||
XhCalendarRangePickerRoot | isDateUnavailable | (value: string, anchor: string | null) => boolean | ||
XhCalendarRangePickerRoot | allowsNonContiguousRanges | boolean | 区间允许跨过不可用的日期；默认关闭，落下起点后只能选到两侧最近的不可用日为止。 | |
XhCalendarRangePickerRoot | activeIndex | 0 | 1 | 下一次点选落在哪一端；为 1 且已有起点时只改终点。 | |
XhCalendarRangePickerRoot | invalid | boolean | 校验失败：根带 data-invalid，区间内的格子报告 aria-invalid。 | |
XhCalendarRangePickerRoot | locale | string | ||
XhCalendarRangePickerRoot | firstDayOfWeek | number | 周首日，0 = 星期日 … 6 = 星期六；不给按 locale。 | |
XhCalendarRangePickerRoot | timeZone | string | ||
XhCalendarRangePickerRoot | disabled | boolean | ||
XhCalendarRangePickerRoot | readOnly | boolean | ||
XhCalendarRangePickerRoot | weekdayFormat | CalendarWeekdayFormat | ||
XhCalendarRangePickerRoot | fixedWeeks | boolean | ||
XhCalendarRangePickerRoot | granularity | CalendarGranularity | 选择粒度。 | |
XhCalendarRangePickerRoot | activeView | CalendarView | 面板当前所处的层级；给定即受控，默认跟随 granularity。 | |
XhCalendarRangePickerRoot | defaultActiveView | CalendarView | 非受控初值，默认同 granularity。 | |
XhCalendarRangePickerRoot | visibleCount | number | 并排展示几页，默认 1。 | |
XhCalendarRangePickerRoot | translations | Partial<CalendarRangePickerTranslations> | ||
XhCalendarRangePickerRoot | onValueChange | CalendarRangePickerProps['onValueChange'] | ||
XhCalendarRangePickerRoot | onFocusedValueChange | CalendarRangePickerProps['onFocusedValueChange'] | ||
XhCalendarRangePickerRoot | onActiveViewChange | CalendarRangePickerProps['onActiveViewChange'] | ||
XhCalendarRangePickerRoot | children | SlotChildren<CalendarRangePickerRootSlotProps> | ||
XhCalendarRangePickerWeekDay | value | number | string | 是 | 列序 0-6，兼收字符串。 |
XhCalendarRangePickerWeekNumber | value | string | 是 | 该行行首那一天的 ISO 串。 |
状态
以下名称仅用于内部状态机。
状态：idle · anchored
事件：RANGE.ANCHOR · RANGE.COMMIT · DRAG.SET · HOVER.SET · HOVER.CLEAR · PRESS.START · PRESS.END
判据：startsRange · endsFromStart · anchorsRange · canPress
connect API
getXxxProps() 返回对应部件的宿主属性。
| 成员 | 类型 | 说明 |
|---|---|---|
rangeAnchor | string | null | 区间选到一半时的起点（周期首日的 ISO 串）；其余时候为 null。 |
dragging | boolean | 指针正按在格子上拖动选择区间。 |
setRangeAnchor | (next: string | null) => void | 直接改写区间起点；传 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 那一档时这一下是往下钻一层 |
Escape | focus in grid, 区间已落起点 | 撤掉起点，原来的区间原样还在；不拦默认行为，外层浮层照常收起 |
Tab / Shift+Tab | focus in grid, 区间已落起点 | 焦点离开前把区间收在起点到聚焦日之间；不拦默认行为，焦点照常离开 |
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' |
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-description | translations.finishRangeSelectionPrompt | translations.startRangeSelectionPrompt | undefined |
cell-trigger | aria-disabled | 'true' | 'false' |
cell-trigger | aria-invalid | 'true' | undefined |
cell-trigger | aria-label | frame.dateLabel(state.date, period) |
cell-trigger | role | 'button' |
样式参考
皮肤
@xihan-ui/styles/calendar-range-picker.css 按 [data-scope="calendar-range-picker"][data-part="root"] 部件选择器书写，发布产物以挂载类 .xh-scope-calendar-range-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-dragging | ''（条件成立时才出现） |
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-in-range | ''（条件成立时才出现） |
cell | data-invalid | ''（条件成立时才出现） |
cell | data-outside-month | ''（条件成立时才出现） |
cell | data-range-end | ''（条件成立时才出现） |
cell | data-range-preview | ''（条件成立时才出现） |
cell | data-range-start | ''（条件成立时才出现） |
cell | data-selected | ''（条件成立时才出现） |
cell | data-today | ''（条件成立时才出现） |
cell | data-view | view |
cell-trigger | data-disabled | ''（条件成立时才出现） |
cell-trigger | data-focus | ''（条件成立时才出现） |
cell-trigger | data-in-range | ''（条件成立时才出现） |
cell-trigger | data-invalid | ''（条件成立时才出现） |
cell-trigger | data-outside-month | ''（条件成立时才出现） |
cell-trigger | data-pressed | ''（条件成立时才出现） |
cell-trigger | data-range-end | ''（条件成立时才出现） |
cell-trigger | data-range-preview | ''（条件成立时才出现） |
cell-trigger | data-range-start | ''（条件成立时才出现） |
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-range-picker-cell-bg-disabled | cell | background-color | disabledin-rangenot([data-in-range]) | --xh-bg-subtle | calendar-range-picker 的 cell 部件 background-color 覆盖槽。 |
--xh-calendar-range-picker-cell-bg-hover | cell-trigger | background-color | disabledhoverloadingnot([data-disabled])not([data-loading]) | --xh-_action-variant-bg-hover | calendar-range-picker 的 cell-trigger 部件 background-color 覆盖槽。 |
--xh-calendar-range-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-range-picker 的 cell-trigger 部件 background-color 覆盖槽。 |
--xh-calendar-range-picker-cell-bg-selected | cell-trigger | --xh-ink-surfacebackground-color | disabledfocus-visiblehoverin-rangeis([data-range-start], [data-range-end])loadingnot([data-disabled])not([data-in-range])not([data-loading])not([data-outside-month])outside-monthrange-endrange-startselectedxh-ink-surface | --xh-bg-brand | calendar-range-picker 的 cell-trigger 部件 --xh-ink-surface、background-color 覆盖槽。 |
--xh-calendar-range-picker-cell-bg-selected-active | cell-trigger | background-color | disabledin-rangeis(:active, [data-pressed])is([data-range-start], [data-range-end])loadingnot([data-disabled])not([data-in-range])not([data-loading])not([data-outside-month])outside-monthpressedrange-endrange-startselected | --xh-bg-brand-active | calendar-range-picker 的 cell-trigger 部件 background-color 覆盖槽。 |
--xh-calendar-range-picker-cell-bg-selected-disabled | cell-trigger | --xh-ink-surfacebackground-color | disabledselectedxh-ink-surface | --xh-bg-subtle-hover | calendar-range-picker 的 cell-trigger 部件 --xh-ink-surface、background-color 覆盖槽。 |
--xh-calendar-range-picker-cell-fg | cell-trigger | color | @media printdefaultdisabledfocus-visiblehoverin-rangeis(:active, [data-pressed])is([data-range-start], [data-range-end])loadingnot([data-disabled])not([data-in-range])not([data-loading])not([data-outside-month])outside-monthpressedrange-endrange-startselected | --xh-fg-default | calendar-range-picker 的 cell-trigger 部件 color 覆盖槽。 |
--xh-calendar-range-picker-cell-fg-outside | cell-trigger | color | disabledfocus-visiblehoveris(:active, [data-pressed])loadingnot([data-disabled])not([data-loading])outside-monthpressed | --xh-fg-subtle | calendar-range-picker 的 cell-trigger 部件 color 覆盖槽。 |
--xh-calendar-range-picker-cell-fg-selected | cell-trigger | color | disabledfocus-visiblehoverin-rangeis(:active, [data-pressed])is([data-range-start], [data-range-end])loadingnot([data-disabled])not([data-in-range])not([data-loading])not([data-outside-month])outside-monthpressedrange-endrange-startselected | --xh-fg-on-brand | calendar-range-picker 的 cell-trigger 部件 color 覆盖槽。 |
--xh-calendar-range-picker-cell-font-size | cell-trigger | font-size | default | --xh-text-body-size | calendar-range-picker 的 cell-trigger 部件 font-size 覆盖槽。 |
--xh-calendar-range-picker-cell-font-weight | cell-trigger | font-weight | default | --xh-font-weight-medium | calendar-range-picker 的 cell-trigger 部件 font-weight 覆盖槽。 |
--xh-calendar-range-picker-cell-font-weight-outside | cell-trigger | font-weight | outside-month | --xh-font-weight-regular | calendar-range-picker 的 cell-trigger 部件 font-weight 覆盖槽。 |
--xh-calendar-range-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-range-picker 的 grid、week-row 部件 grid-template-columns、min-inline-size 覆盖槽。 |
--xh-calendar-range-picker-cell-px | cell | padding-inline | default | --xh-space-0 | calendar-range-picker 的 cell 部件 padding-inline 覆盖槽。 |
--xh-calendar-range-picker-cell-py | cell | border-end-end-radiusborder-end-start-radiusborder-start-end-radiusborder-start-start-radiusinset-blockinset-inline-endinset-inline-startpadding-block | defaultdisabledin-rangeis([data-view='week'], [data-view='month'], [data-view='quarter'], [data-view='year'])not([data-in-range])not([data-outside-month])outside-monthrange-endrange-startview=dayview=monthview=quarterview=weekview=year | --xh-space-1_5 | calendar-range-picker 的 cell 部件 border-end-end-radius、border-end-start-radius、border-start-end-radius、border-start-start-radius、inset-block、inset-inline-end、inset-inline-start、padding-block 覆盖槽。 |
--xh-calendar-range-picker-cell-radius | cell-trigger | border-radius | view=day | --xh-shape-circle | calendar-range-picker 的 cell-trigger 部件 border-radius 覆盖槽。 |
--xh-calendar-range-picker-cell-size | cellcell-trigger | block-sizeinline-sizeinset-blockinset-block-startinset-inline-endinset-inline-startmin-inline-size | defaultdisabledin-rangenot([data-in-range])not([data-outside-month])outside-monthrange-endrange-starttodayview=dayxh-action-profile=icon | --xh-_action-profile-visual-size--xh-control-action-size | calendar-range-picker 的 cell、cell-trigger 部件 block-size、inline-size、inset-block、inset-block-start、inset-inline-end、inset-inline-start、min-inline-size 覆盖槽。 |
--xh-calendar-range-picker-disabled-inset | cell | inset-block | disabledin-rangenot([data-in-range]) | --xh-space-0_5 | calendar-range-picker 的 cell 部件 inset-block 覆盖槽。 |
--xh-calendar-range-picker-gap | root | gap | default | --xh-space-0 | calendar-range-picker 的 root 部件 gap 覆盖槽。 |
--xh-calendar-range-picker-grid-gap | grid | gap | default | --xh-space-0 | calendar-range-picker 的 grid 部件 gap 覆盖槽。 |
--xh-calendar-range-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-range-picker 的 grid、week-row 部件 grid-template-columns、min-inline-size、padding-inline 覆盖槽。 |
--xh-calendar-range-picker-grid-py | grid | padding-block | default | --xh-space-3 | calendar-range-picker 的 grid 部件 padding-block 覆盖槽。 |
--xh-calendar-range-picker-header-border | header | border-block-end | default | --xh-material-solid-border | calendar-range-picker 的 header 部件 border-block-end 覆盖槽。 |
--xh-calendar-range-picker-header-gap | header | gap | default | --xh-space-1 | calendar-range-picker 的 header 部件 gap 覆盖槽。 |
--xh-calendar-range-picker-header-px | header | padding-inline | default | --xh-space-4 | calendar-range-picker 的 header 部件 padding-inline 覆盖槽。 |
--xh-calendar-range-picker-header-py | header | min-block-sizepadding-block | default | --xh-space-2 | calendar-range-picker 的 header 部件 min-block-size、padding-block 覆盖槽。 |
--xh-calendar-range-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-range-picker 的 heading、heading-month-trigger、heading-year-trigger 部件 color 覆盖槽。 |
--xh-calendar-range-picker-heading-font-size | headingheading-month-triggerheading-year-trigger | font-size | defaultnot([hidden]) | --xh-text-label-size | calendar-range-picker 的 heading、heading-month-trigger、heading-year-trigger 部件 font-size 覆盖槽。 |
--xh-calendar-range-picker-heading-font-weight | headingheading-month-triggerheading-year-trigger | font-weight | defaultnot([hidden]) | --xh-font-weight-medium | calendar-range-picker 的 heading、heading-month-trigger、heading-year-trigger 部件 font-weight 覆盖槽。 |
--xh-calendar-range-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-range-picker 的 heading-month-trigger、heading-year-trigger 部件 background-color 覆盖槽。 |
--xh-calendar-range-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-range-picker 的 heading-month-trigger、heading-year-trigger 部件 background-color 覆盖槽。 |
--xh-calendar-range-picker-heading-trigger-px | heading-month-triggerheading-year-trigger | padding-inline | not([hidden]) | --xh-space-0_5 | calendar-range-picker 的 heading-month-trigger、heading-year-trigger 部件 padding-inline 覆盖槽。 |
--xh-calendar-range-picker-heading-trigger-radius | heading-month-triggerheading-year-trigger | border-radius | not([hidden]) | --xh-shape-control | calendar-range-picker 的 heading-month-trigger、heading-year-trigger 部件 border-radius 覆盖槽。 |
--xh-calendar-range-picker-icon-size | header | --xh-icon-size | default | --xh-glyph-size-sm | calendar-range-picker 的 header 部件 --xh-icon-size 覆盖槽。 |
--xh-calendar-range-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-range-picker 的 next-trigger、next-year-trigger、prev-trigger、prev-year-trigger 部件 --xh-ink-surface、background-color 覆盖槽。 |
--xh-calendar-range-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-range-picker 的 next-trigger、next-year-trigger、prev-trigger、prev-year-trigger 部件 background-color 覆盖槽。 |
--xh-calendar-range-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-range-picker 的 next-trigger、next-year-trigger、prev-trigger、prev-year-trigger 部件 background-color 覆盖槽。 |
--xh-calendar-range-picker-nav-fg | next-triggernext-year-triggerprev-triggerprev-year-trigger | color | defaultfocus-visible | --xh-fg-muted | calendar-range-picker 的 next-trigger、next-year-trigger、prev-trigger、prev-year-trigger 部件 color 覆盖槽。 |
--xh-calendar-range-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-range-picker 的 next-trigger、next-year-trigger、prev-trigger、prev-year-trigger 部件 color 覆盖槽。 |
--xh-calendar-range-picker-nav-radius | next-triggernext-year-triggerprev-triggerprev-year-trigger | border-radius | default | --xh-shape-circle | calendar-range-picker 的 next-trigger、next-year-trigger、prev-trigger、prev-year-trigger 部件 border-radius 覆盖槽。 |
--xh-calendar-range-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-range-picker 的 next-trigger、next-year-trigger、prev-trigger、prev-year-trigger 部件 block-size、inline-size、min-inline-size 覆盖槽。 |
--xh-calendar-range-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-range-picker 的 grid、week-row 部件 column-gap、gap 覆盖槽。 |
--xh-calendar-range-picker-period-px | cell | border-end-end-radiusborder-end-start-radiusborder-start-end-radiusborder-start-start-radiuspadding-inline | in-rangeis([data-view='week'], [data-view='month'], [data-view='quarter'], [data-view='year'])range-endrange-startview=monthview=quarterview=weekview=year | --xh-space-1 | calendar-range-picker 的 cell 部件 border-end-end-radius、border-end-start-radius、border-start-end-radius、border-start-start-radius、padding-inline 覆盖槽。 |
--xh-calendar-range-picker-period-radius | cellcell-trigger | border-end-end-radiusborder-end-start-radiusborder-radiusborder-start-end-radiusborder-start-start-radius | defaultin-rangeis([data-view='week'], [data-view='month'], [data-view='quarter'], [data-view='year'])range-endrange-startview=monthview=quarterview=weekview=year | --xh-shape-control | calendar-range-picker 的 cell、cell-trigger 部件 border-end-end-radius、border-end-start-radius、border-radius、border-start-end-radius、border-start-start-radius 覆盖槽。 |
--xh-calendar-range-picker-range-bg | cell | background-color | in-rangenot([data-outside-month])outside-month | --xh-bg-brand-subtle | calendar-range-picker 的 cell 部件 background-color 覆盖槽。 |
--xh-calendar-range-picker-range-cap-radius | cell | border-end-end-radiusborder-end-start-radiusborder-start-end-radiusborder-start-start-radius | in-rangerange-endrange-start | --xh-_calendar-range-picker-range-cap | calendar-range-picker 的 cell 部件 border-end-end-radius、border-end-start-radius、border-start-end-radius、border-start-start-radius 覆盖槽。 |
--xh-calendar-range-picker-range-cell-bg-hover | cell-trigger | background-color | disabledhoverin-rangeloadingnot([data-disabled])not([data-loading])not([data-outside-month], [data-disabled], [data-range-start], [data-range-end])outside-monthrange-endrange-start | --xh-bg-brand-subtle-hover | calendar-range-picker 的 cell-trigger 部件 background-color 覆盖槽。 |
--xh-calendar-range-picker-range-cell-bg-pressed | cell-trigger | background-color | disabledin-rangeis(:active, [data-pressed])loadingnot([data-disabled])not([data-loading])not([data-outside-month], [data-disabled], [data-range-start], [data-range-end])outside-monthpressedrange-endrange-start | --xh-bg-brand-subtle-active | calendar-range-picker 的 cell-trigger 部件 background-color 覆盖槽。 |
--xh-calendar-range-picker-range-inset | cell | border-end-end-radiusborder-end-start-radiusborder-start-end-radiusborder-start-start-radiusinset-blockinset-inline-endinset-inline-start | in-rangeis([data-view='week'], [data-view='month'], [data-view='quarter'], [data-view='year'])not([data-outside-month])outside-monthrange-endrange-startview=dayview=monthview=quarterview=weekview=year | --xh-space-0_5 | calendar-range-picker 的 cell 部件 border-end-end-radius、border-end-start-radius、border-start-end-radius、border-start-start-radius、inset-block、inset-inline-end、inset-inline-start 覆盖槽。 |
--xh-calendar-range-picker-range-preview-bg | cell | background-color | in-rangenot([data-outside-month])outside-monthrange-preview | --xh-bg-subtle | calendar-range-picker 的 cell 部件 background-color 覆盖槽。 |
--xh-calendar-range-picker-range-preview-cell-bg-hover | cell-trigger | background-color | disabledhoverin-rangeloadingnot([data-disabled])not([data-loading])not([data-outside-month], [data-disabled], [data-range-start], [data-range-end])outside-monthrange-endrange-previewrange-start | --xh-bg-subtle-hover | calendar-range-picker 的 cell-trigger 部件 background-color 覆盖槽。 |
--xh-calendar-range-picker-range-preview-cell-bg-pressed | cell-trigger | background-color | disabledin-rangeis(:active, [data-pressed])loadingnot([data-disabled])not([data-loading])not([data-outside-month], [data-disabled], [data-range-start], [data-range-end])outside-monthpressedrange-endrange-previewrange-start | --xh-bg-subtle-active | calendar-range-picker 的 cell-trigger 部件 background-color 覆盖槽。 |
--xh-calendar-range-picker-row-gap | grid-bodygrid-head | gap | default | --xh-space-0 | calendar-range-picker 的 grid-body、grid-head 部件 gap 覆盖槽。 |
--xh-calendar-range-picker-today-mark-bg | cell | background-color | today | --xh-fg-brand | calendar-range-picker 的 cell 部件 background-color 覆盖槽。 |
--xh-calendar-range-picker-today-mark-size | cell | block-sizeborderinline-size | @media printtoday | --xh-space-1 | calendar-range-picker 的 cell 部件 block-size、border、inline-size 覆盖槽。 |
--xh-calendar-range-picker-week-cell-px | cell-trigger | padding-inline | view=week | --xh-space-3 | calendar-range-picker 的 cell-trigger 部件 padding-inline 覆盖槽。 |
--xh-calendar-range-picker-week-day-fg | week-day | color | default | --xh-fg-subtle | calendar-range-picker 的 week-day 部件 color 覆盖槽。 |
--xh-calendar-range-picker-week-day-font-size | week-day | font-size | default | --xh-text-body-size | calendar-range-picker 的 week-day 部件 font-size 覆盖槽。 |
--xh-calendar-range-picker-week-day-font-weight | week-day | font-weight | default | --xh-font-weight-regular | calendar-range-picker 的 week-day 部件 font-weight 覆盖槽。 |
--xh-calendar-range-picker-week-day-h | week-day | block-size | default | --xh-control-h-md | calendar-range-picker 的 week-day 部件 block-size 覆盖槽。 |
--xh-calendar-range-picker-week-number-fg | week-number | color | default | --xh-fg-subtle | calendar-range-picker 的 week-number 部件 color 覆盖槽。 |
--xh-calendar-range-picker-week-number-font-size | week-number | font-size | default | --xh-text-caption-size | calendar-range-picker 的 week-number 部件 font-size 覆盖槽。 |
--xh-calendar-range-picker-week-number-w | week-row | grid-template-columns | @media (pointer: coarse)has(> [data-part='week-number'])not([hidden]) | --xh-control-h-md | calendar-range-picker 的 week-row 部件 grid-template-columns 覆盖槽。 |
--xh-calendar-range-picker-year-grid-max-h | grid | max-block-size | view=year | --xh-viewport-h-sm | calendar-range-picker 的 grid 部件 max-block-size 覆盖槽。 |
动效
动效角色：按压 · 状态（见动效规范）。
background-color 走 transition 过渡。时长与缓动读动效令牌，改令牌即改全局节奏。
系统开启减弱动效时由令牌层统一收敛，皮肤不另作判断。
响应式
皮肤另按输入能力分档：pointer: coarse：同一份皮肤在触屏与带指针的设备上不一样，与视口宽度无关。
RTL
皮肤用逻辑属性排布（inline-start 一族），dir="rtl" 下自动镜像；另有按 dir 分支的规则。