DatePicker

Default

Renders the current month with no date pre-selected.

<DatePicker />

Initial value

Pass a value string in YYYY-MM-DD format to pre-select a date and open to that month.

<DatePicker value="2026-07-04" />

Monday first

Set firstDayOfWeek={1} to start the week on Monday (ISO standard). Default is Sunday (0).

<DatePicker firstDayOfWeek={1} />

Form submission

Provide a name prop to include the selected date in a form as a hidden input. The submitted value is in YYYY-MM-DD format.

<form method="POST" action="/api/book">
  <DatePicker name="date" />
  <button type="submit">Book</button>
</form>

Listening for changes

The dv-date-change event fires on the component's root element whenever a date is selected. event.detail.date contains the ISO string.

<DatePicker id="my-picker" />

<script>
  document.getElementById('my-picker').addEventListener('dv-date-change', (e) => {
    console.log('Selected:', e.detail.date) // e.g. "2026-07-04"
  })
</script>

Side by side

<Stack direction="row" gap="md" align="start">
  <DatePicker value="2026-01-15" />
  <DatePicker value="2026-02-20" firstDayOfWeek={1} />
</Stack>