Date Range Picker
Material Design 3 modal or docked date picker and date range picker web components.
- 5.6 KB gzipped
- @lit-material/date-picker 0.1.0
- Renders on the server
Example
Date Range Picker
Calendar-grid, modal or docked, two-endpoint scope. Tap a day to set the start, tap again to set the end — hover (or move focus with the keyboard) to preview the range first.
Modal
Docked
Always visible in-flow — no dialog, scrim, or open/show()/close().
Select dates
Wed, Jun 10 – Sat, Jun 20
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
Install
npm install @lit-material/date-picker @lit-material/tokensimport "@lit-material/date-picker";Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-date-range-picker>
Material Design 3 date *range* picker — the two-endpoint sibling of
lit-material-date-picker, sharing its calendar-grid rendering approach,
keyboard navigation, and modal/docked variant split, but tracking a
start/end pair instead of a single value.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
variant | variant | DateRangePickerVariant | "modal" | |
open | open | boolean | false | Whether a modal picker is open. Ignored for docked, which is always visible in-flow. |
start | start | string | undefined | none | The confirmed range start, as an ISO "YYYY-MM-DD" string. |
end | end | string | undefined | none | The confirmed range end, as an ISO "YYYY-MM-DD" string. |
min | min | string | undefined | none | Inclusive lower bound, as an ISO "YYYY-MM-DD" string. |
max | max | string | undefined | none | Inclusive upper bound, as an ISO "YYYY-MM-DD" string. |
label | label | string | "Select dates" | |
firstDayOfWeek | first-day-of-week | number | 0 | 0 = Sunday (default), 1 = Monday, ... |
Events
| Event | Description |
|---|---|
close | modal only: re-dispatched from the native close event, after the dialog has closed. |
cancel | modal only: re-dispatched from the native cancel event. Cancelable: calling preventDefault() stops the dialog from closing. |
change | Fires when a range is confirmed via "OK" and start/end actually changed. |
CSS parts
| Part | Description |
|---|---|
dialog | The native <dialog> element. Only rendered for modal. |
container | The visible card. |
header | The label + selected-range headline. |
nav | The month navigation row (or the year-range label, in year mode). |
calendar | The <table role="grid"> of day cells. |
year-grid | The scrollable grid of years, in year mode. |
actions | The Cancel/OK row. |