MultiDatePicker

'use client';
import { useState } from 'react';
import { Text } from '@swiftuijs/ui';
import { VStack } from '@swiftuijs/ui';
import { MultiDatePicker } from '@swiftuijs/ui';
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>);
}
export default function Example() {
    return (<ControlledDemo />);
}

Status: adapted

Usage and limitations

• 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

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.