DateInput

Default

<DateInput label="Pick a date" />

Initial value

<DateInput label="Departure date" value="2026-07-04" />

Label, description and asterisk

<DateInput
  label="Event date"
  description="When should the event take place?"
  withAsterisk
/>

Error state

<DateInput label="Check-in date" error="Please select a future date." />

Disabled

<DateInput label="Read-only date" value="2026-06-21" disabled />

Monday first

<DateInput label="Week starts Monday" firstDayOfWeek={1} />

Form submission

Add a name prop to include the date in a form POST. The submitted value is always in YYYY-MM-DD format regardless of how it is displayed.

<form method="POST" action="/api/reserve">
  <DateInput label="Reservation date" name="date" withAsterisk />
  <button type="submit">Reserve</button>
</form>

Listening for changes

The dv-date-change event fires on the component root whenever a date is selected from the popup.

<DateInput id="booking-date" label="Booking date" />

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