Date, time, datetime-local, month, and week inputs, styled to match the text fields. The pickers are the browser's own.
Types
| Type | Example |
|---|---|
| type="date" | |
| type="time" | |
| type="datetime-local" | |
| type="month" | |
| type="week" |
States
| Attribute | Example |
|---|---|
| value | |
| min max | |
| aria-invalid="true" | |
| disabled |
The class is optional inside .mdst-ui. A bare <input type="date"> there gets the same styles.
These are the browser's own pickers. modest-ui styles the field to match the other inputs; the calendar or clock that opens
is drawn by the browser and follows color-scheme.
Usage
<input type="date" class="mdst-input" />
<input type="time" class="mdst-input" />
<input type="datetime-local" class="mdst-input" />
<input type="month" class="mdst-input" />
<input type="week" class="mdst-input" />
<!-- Limit the range -->
<input type="date" class="mdst-input" min="2026-10-01" max="2026-10-31" />