MultiDatePicker

function ControlledDemo() {
  const [dates, setDates] = useState(['2026-04-10', '2026-04-12'])

  return (
    <VStack spacing={16}>
      <Text>Selected: {dates.join(', ')}</Text>
      <MultiDatePicker
        label="Travel dates"
        value={dates}
        onValueChange={setDates}
      />
    </VStack>
  )
}

function BoundedDemo() {
  const [dates, setDates] = useState(['2026-05-03'])

  return (
    <VStack spacing={16}>
      <Text>Selected: {dates.join(', ')}</Text>
      <MultiDatePicker
        label="Conference dates"
        minimumDate="2026-05-01"
        maximumDate="2026-05-31"
        value={dates}
        onValueChange={setDates}
      />
    </VStack>
  )
}

Overview

MultiDatePicker adapts SwiftUI's multi-date selection model to the web by combining a native date input with an ordered list of selected dates.

Status: adapted

SwiftUI Correspondence: Adapted from SwiftUI's MultiDatePicker.

Notes

• value and defaultValue use native YYYY-MM-DD date strings
• onValueChange receives a normalized, ordered selection after every toggle
• minimumDate and maximumDate map to native input bounds
• When name is provided, the control serializes each selected date as a repeated form field
• Removing selected dates stays in the same control instead of opening a second editor
• Duplicate dates are collapsed automatically so the selection behaves like a date set, not a raw array

Best Practices

1. Use ordered date arrays so selections remain deterministic across renders.
2. Keep labels explicit because the control includes both a date entry field and a selected-date list.
3. Prefer bounded ranges when the valid dates are known ahead of time.