DateTimePicker

DateTimePicker provides an intuitive calendar interface for selecting dates and times.

Import​

<script>
  import { DateTimePicker } from '@classic-homes/theme-svelte';
</script>

Basic Usage​

<script>
  let date = $state(null);
</script>

<DateTimePicker bind:value={date} />

Props​

Prop	Type	Default	Description
value	Date | null	null	Selected date (bindable)
stringValue	string | null	null	ISO string value (alternative for form binding)
onValueChange	(date: Date | null) => void	-	Callback when value changes
onStringValueChange	(value: string | null) => void	-	Callback when stringValue changes
placeholder	string	-	Placeholder text
disabled	boolean	false	Disables the picker
required	boolean	false	Marks as required
min	Date	-	Minimum selectable date
max	Date	-	Maximum selectable date
timeFormat	'12h' | '24h'	'12h'	Time format (12-hour or 24-hour)
minuteStep	number	15	Minute step interval
name	string	-	Name attribute for form submission
id	string	-	Element ID
dateOnly	boolean	false	Show only date picker without time selection
label	string	-	Label text for the picker
hint	string	-	Hint text displayed below the picker
error	string	-	Error message to display
class	string	-	Additional CSS classes
openOnFocus	boolean	false	Whether to open the picker when the input is focused

With Label and Hint​

<DateTimePicker
  label="Select date"
  hint="Choose your preferred date"
  bind:value={date}
  placeholder="Pick a date..."
/>

Date Only Mode​

To show only a date picker without time selection:

<DateTimePicker label="Select date" bind:value={date} dateOnly />

With Time​

By default, the picker includes time selection:

<DateTimePicker label="Appointment" bind:value={dateTime} />

Date Range Constraints​

Limit selectable dates:

<DateTimePicker
  label="Booking date"
  bind:value={date}
  min={new Date()}
  max={new Date(Date.now() + 30 * 24 * 60 * 60 * 1000)}
/>

Time Format​

Use 24-hour format with custom minute steps:

<DateTimePicker label="Meeting time" bind:value={meeting} timeFormat="24h" minuteStep={30} />

Validation​

<DateTimePicker
  label="Birth date"
  bind:value={birthDate}
  required
  error={!birthDate ? 'Please select a date' : ''}
/>

Examples​

Event Scheduler​

<DateTimePicker label="Event date and time" bind:value={eventDate} min={new Date()} />

Birth Date​

<DateTimePicker
  label="Date of birth"
  bind:value={birthDate}
  max={new Date()}
  dateOnly
  placeholder="Select your birth date"
/>

Booking Window​

<script>
  const today = new Date();
  const maxDate = new Date();
  maxDate.setMonth(maxDate.getMonth() + 3);
</script>

<DateTimePicker label="Reservation date" bind:value={reservationDate} min={today} max={maxDate} />

Accessibility​

The DateTimePicker component includes:

• Full keyboard navigation
• Screen reader announcements
• Focus management in calendar
• ARIA labels for navigation
• Auto-generated IDs link labels to inputs
• aria-describedby connects hint and error messages
• aria-invalid set when error is present

Related Components​

• Input - For manual date entry
• FormField - Complete field wrapper