Date Picker

README

Demo

Components

mdc-date-picker

Implements Material Design 3 Expressive Date pickers: docked, modal calendar/year, fullscreen range, and modal input, with single and range selection. Dates are UTC-midnight millis; visible fields use MM/DD/YYYY while form submit values stay ISO YYYY-MM-DD.

Clear Label

Code

<mdc-date-picker id="date-clear-label" variant="modal" clear-label="Clear" supporting-text="Select date"></mdc-date-picker>
<mdc-button variant="filled" onclick="this.getRootNode().querySelector('#date-clear-label').show()"><span>Open with clear</span></mdc-button>

Confirm Label

Code

<mdc-date-picker id="date-confirm-label" variant="modal" confirm-label="Save" supporting-text="Select date"></mdc-date-picker>
<mdc-button variant="filled" onclick="this.getRootNode().querySelector('#date-confirm-label').show()"><span>Open save action</span></mdc-button>

Disable Elevation

Code

<mdc-date-picker id="date-no-elevation" variant="modal" disable-elevation supporting-text="Select date"></mdc-date-picker>
<mdc-button variant="filled" onclick="this.getRootNode().querySelector('#date-no-elevation').show()"><span>Open flat picker</span></mdc-button>

Disabled

Code

<mdc-date-picker id="date-disabled" variant="modal" disabled supporting-text="Select date"></mdc-date-picker>
<mdc-button variant="filled" onclick="this.getRootNode().querySelector('#date-disabled').show()"><span>Open disabled picker</span></mdc-button>

Display Mode

Code

<mdc-date-picker id="date-display-mode" variant="modal" display-mode="input" selection="single" supporting-text="Select date"></mdc-date-picker>
<mdc-button variant="filled" onclick="this.getRootNode().querySelector('#date-display-mode').show()"><span>Open input mode</span></mdc-button>

First Day Of Week

Code

<mdc-date-picker id="date-first-day" variant="modal" first-day-of-week="1" supporting-text="Select date"></mdc-date-picker>
<mdc-button variant="filled" onclick="this.getRootNode().querySelector('#date-first-day').show()"><span>Open Monday start</span></mdc-button>

Headline

Code

<mdc-date-picker id="date-headline" variant="modal" headline="Team offsite" supporting-text="Select date"></mdc-date-picker>
<mdc-button variant="filled" onclick="this.getRootNode().querySelector('#date-headline').show()"><span>Open custom headline</span></mdc-button>

Max

Code

<mdc-date-picker id="date-max" variant="modal" max="1798761600000" supporting-text="Select date"></mdc-date-picker>
<mdc-button variant="filled" onclick="this.getRootNode().querySelector('#date-max').show()"><span>Open with max</span></mdc-button>

Min

Code

<mdc-date-picker id="date-min" variant="modal" min="1767225600000" supporting-text="Select date"></mdc-date-picker>
<mdc-button variant="filled" onclick="this.getRootNode().querySelector('#date-min').show()"><span>Open with min</span></mdc-button>

Name

Code

<mdc-date-picker id="date-name" variant="modal" name="appointment-date" supporting-text="Select date"></mdc-date-picker>
<mdc-button variant="filled" onclick="this.getRootNode().querySelector('#date-name').show()"><span>Open named picker</span></mdc-button>

Open

Code

<mdc-date-picker id="date-open" variant="modal" selection="single" supporting-text="Select date"></mdc-date-picker>
<mdc-button variant="filled" onclick="this.getRootNode().querySelector('#date-open').show()"><span>Open date picker</span></mdc-button>

Required

Code

<mdc-date-picker id="date-required" variant="modal" required supporting-text="Select date"></mdc-date-picker>
<mdc-button variant="filled" onclick="this.getRootNode().querySelector('#date-required').show()"><span>Open required picker</span></mdc-button>

Selection

Code

<mdc-date-picker id="date-selection" variant="modal" selection="range" supporting-text="Select dates"></mdc-date-picker>
<mdc-button variant="filled" onclick="this.getRootNode().querySelector('#date-selection').show()"><span>Open range picker</span></mdc-button>

Value

Code

<mdc-date-picker id="date-value" variant="modal" value="1780272000000" supporting-text="Select date"></mdc-date-picker>
<mdc-button variant="filled" onclick="this.getRootNode().querySelector('#date-value').show()"><span>Open preset date</span></mdc-button>

Variant

Code

<mdc-date-picker id="date-variant-modal" variant="modal" selection="single" supporting-text="Select date"></mdc-date-picker>
<mdc-button variant="filled" onclick="this.getRootNode().querySelector('#date-variant-modal').show()"><span>Open modal picker</span></mdc-button>
<mdc-date-picker id="date-variant-docked" variant="docked" selection="single" supporting-text="Select date"></mdc-date-picker>
<mdc-date-picker id="date-variant-input" variant="modal" display-mode="input" selection="single" supporting-text="Select date"></mdc-date-picker>
<mdc-button variant="filled" onclick="this.getRootNode().querySelector('#date-variant-input').show()"><span>Open input picker</span></mdc-button>
<mdc-date-picker id="date-variant-fullscreen" variant="fullscreen" selection="range" supporting-text="Depart - Return dates"></mdc-date-picker>
<mdc-button variant="filled" onclick="this.getRootNode().querySelector('#date-variant-fullscreen').show()"><span>Open fullscreen range</span></mdc-button>