Date Picker
The Date Picker is a native web component (zero dependencies) that shows an input-style button with the selected date formatted (or a placeholder). When clicked, it opens a popover with a calendar; picking a day updates the value, closes the popover, and emits a change event. Use it when you need single-date selection in forms.
Preview
<pura-date-picker value="2026-05-29" placeholder="Pick a date"></pura-date-picker>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
value | string | "" | Selected date in yyyy-mm-dd format; also available as the .value property. |
placeholder | string | "Pick a date" | Text shown when no date is selected. |
disabled | boolean | false | Disables the trigger and prevents the calendar from opening. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/date-picker.js"></script>import "./pura/lib/date-picker.js";