Date 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 Picker
Calendar-grid, modal or docked, single-date scope.
Modal
Docked
Always visible in-flow — no dialog, scrim, or open/show()/close().
| 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-picker>
Material Design 3 date picker — a single-date calendar, either modal
(the default: a dialog built on the native <dialog> element, like
lit-material-dialog — scrim, Escape-to-close, focus trap all come from
the browser) or docked (the same header/calendar/actions, rendered
plainly in-flow with no dialog, scrim, or open/show()/close()
gating — meant to be embedded in your own layout, a card, or a popover you
position yourself, the same way lit-material-navigation-drawer's
standard variant is the same content as modal minus the dialog shell).
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
variant | variant | DatePickerVariant | "modal" | |
open | open | boolean | false | Whether a modal picker is open. Ignored for docked, which is always visible in-flow. |
value | value | string | undefined | none | The confirmed date, 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 date" | |
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 date is confirmed via "OK" and value actually changed. |
CSS parts
| Part | Description |
|---|---|
dialog | The native <dialog> element. Only rendered for modal. |
container | The visible card. |
header | The label + selected-date 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. |