GitHubopen_in_new

DateRangePicker ​

DateRangePicker 是用于选择开始和结束日期的独立界面。默认情况下，宽视口显示连续两个月；窄视口或粗指针设备则改为显示一个月。

原生弹出层关闭时会触发 update:open(false)。DateRangePicker 自身的退出动画结束后会触发 closed。退出期间会保留当前日历视图，动画结束后再重置。

密度 ​

DatePicker 和 DateRangePicker 继承 --md-density。日期单元格保持等宽等高，日历宽度、星期行、月份／年份列表和操作间距会随密度调整。视口较窄时，单元格会限制在可用列宽内。显式设置的组件尺寸 token 优先。

示例 ​

默认 ​

模态模式 ​

限制条件 ​

参考 ​

结构

元素部件选择器
<div>
root
[data-scope="date-range-picker"][data-part="root"]
left_click鼠标左键单击复制
<div>
surface
[data-scope="date-range-picker"][data-part="surface"]
left_click鼠标左键单击复制
<div>
summary
[data-scope="date-range-picker"][data-part="summary"]
left_click鼠标左键单击复制
<span>
prompt
[data-scope="date-range-picker"][data-part="prompt"]
left_click鼠标左键单击复制
<div>
endpoints
[data-scope="date-range-picker"][data-part="endpoints"]
left_click鼠标左键单击复制
<button>
start-selector
[data-scope="date-range-picker"][data-part="start-selector"]
left_click鼠标左键单击复制
<span>
value
[data-scope="date-range-picker"][data-part="value"]
left_click鼠标左键单击复制
<button>
end-selector
[data-scope="date-range-picker"][data-part="end-selector"]
left_click鼠标左键单击复制
<div>
header
[data-scope="date-range-picker"][data-part="header"]
left_click鼠标左键单击复制
<IconButton>
previous-month
[data-scope="date-range-picker"][data-part="previous-month"]
left_click鼠标左键单击复制
<Button>
month-switch
[data-scope="date-range-picker"][data-part="month-switch"]
left_click鼠标左键单击复制
<IconButton>
next-month
[data-scope="date-range-picker"][data-part="next-month"]
left_click鼠标左键单击复制
<IconButton>
previous-year
[data-scope="date-range-picker"][data-part="previous-year"]
left_click鼠标左键单击复制
<Button>
year-switch
[data-scope="date-range-picker"][data-part="year-switch"]
left_click鼠标左键单击复制
<IconButton>
next-year
[data-scope="date-range-picker"][data-part="next-year"]
left_click鼠标左键单击复制
<div>
calendars条件显示
[data-scope="date-range-picker"][data-part="calendars"]
left_click鼠标左键单击复制
<section>
calendar-pane
[data-scope="date-range-picker"][data-part="calendar-pane"]
left_click鼠标左键单击复制
<div>
calendar-title
[data-scope="date-range-picker"][data-part="calendar-title"]
left_click鼠标左键单击复制
<div>
weekdays
[data-scope="date-range-picker"][data-part="weekdays"]
left_click鼠标左键单击复制
<span>
weekday
[data-scope="date-range-picker"][data-part="weekday"]
left_click鼠标左键单击复制
<div>
grid
[data-scope="date-range-picker"][data-part="grid"]
left_click鼠标左键单击复制
<span>
day-cell
[data-scope="date-range-picker"][data-part="day-cell"]
left_click鼠标左键单击复制
<button>
day
[data-scope="date-range-picker"][data-part="day"]
left_click鼠标左键单击复制
<div>
months
[data-scope="date-range-picker"][data-part="months"]
left_click鼠标左键单击复制
<button>
month
[data-scope="date-range-picker"][data-part="month"]
left_click鼠标左键单击复制
<span>
list-icon
[data-scope="date-range-picker"][data-part="list-icon"]
left_click鼠标左键单击复制
<span>
list-label
[data-scope="date-range-picker"][data-part="list-label"]
left_click鼠标左键单击复制
<div>
years
[data-scope="date-range-picker"][data-part="years"]
left_click鼠标左键单击复制
<button>
year
[data-scope="date-range-picker"][data-part="year"]
left_click鼠标左键单击复制
<div>
actions
[data-scope="date-range-picker"][data-part="actions"]
left_click鼠标左键单击复制

属性

名称说明默认值控件
shape可选

Corner style; inherits the shared shape default.

M3Shape | undefined
-
-
id可选

Optional explicit id for the popover element.

string | undefined
undefined
-
variant可选

Visual and positioning mode. Auto uses docked layout until a narrow/coarse pointer viewport.

DatePickerVariant | undefined
"auto"
-
calendars可选

Number of calendar months to show. Auto shows two months on wide viewports and one on narrow/coarse inputs.

DateRangePickerCalendars | undefined
"auto"
-
anchorName可选

CSS anchor name used to position the docked popover.

string | undefined
undefined
-
anchorElement可选

Element passed to showPopover as the source for focus and dismissal semantics.

HTMLElement | undefined
undefined
-
ariaLabel可选

Accessible label for the picker surface.

string | undefined
undefined
min可选

Earliest selectable date, formatted as YYYY-MM-DD.

string | undefined
undefined
max可选

Latest selectable date, formatted as YYYY-MM-DD.

string | undefined
undefined
locale可选

BCP 47 locale used for month, weekday, and date accessibility labels.

string | undefined
undefined
-
firstDayOfWeek可选

First day of the week, where 0 is Sunday and 6 is Saturday.

0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined
undefined
-
confirmText可选

Text for the confirmation button.

string | undefined
undefined
cancelText可选

Text for the cancel button.

string | undefined
undefined
startText可选

Text used for the start side of the range.

string | undefined
undefined
endText可选

Text used for the end side of the range.

string | undefined
undefined
today可选

Date treated as today, formatted as YYYY-MM-DD. Useful for deterministic tests.

string | undefined
undefined
-
modelValue可选

-

DateRangePickerModelValue
-
-
open可选

-

boolean | undefined
false

事件6

名称类型说明
update:open[value: boolean]-
cancel[]-
closed[]-
update:modelValue[value: DateRangePickerModelValue]-
change[value: DateRangePickerModelValue]-
confirm[value: DateRangePickerModelValue]-

样式5

Token说明
--md-date-range-picker-docked-container-widthLayout
回退值45rem

Controls docked container width when two calendars are visible.

--md-date-range-picker-range-container-colorState
回退值var(--md-sys-color-primary-container)

Controls selected range container color.

--md-date-range-picker-range-label-text-colorState
回退值var(--md-sys-color-on-primary-container)

Controls selected range label text color.

--md-date-range-picker-summary-label-text-colorColor
回退值var(--md-sys-color-primary)

Controls summary label text color.

--md-date-range-picker-summary-value-text-colorColor
回退值var(--md-sys-color-on-surface)

Controls summary value text color.