Date & Time

DatePicker

A segmented date input paired with a calendar popover. Type into each segment or pick from the calendar, with granularity, min/max limits, locale support, and an optional time field.

Playground

Experiment with different props in real-time.

07202026

Variant

Color

Size

Calendar

Time input

Basic Usage

Bind a DateValue from @internationalized/date.

07202026

<script lang="ts">
  import { DatePicker } from 'sv5ui';
  import { today, getLocalTimeZone } from '@internationalized/date';
  import type { DateValue } from '@internationalized/date';

  let value = $state<DateValue>(today(getLocalTimeZone()));
</script>

<DatePicker bind:value />

Controlled Open

Bind open to control the popover externally.

mmddyyyy

<script lang="ts">
  import { DatePicker, Button } from 'sv5ui';

  let open = $state(false);
</script>

<DatePicker bind:open />
<Button label="Toggle calendar" onclick={() => (open = !open)} />

Date & Time Granularity

A time granularity adds time segments to the field.

mmddyyyy––––AM

<!-- Edit date and time in the segmented field -->
<DatePicker granularity="minute" />

Min & Max

mmddyyyy

<script lang="ts">
  import { DatePicker } from 'sv5ui';
  import { today, getLocalTimeZone } from '@internationalized/date';

  const now = today(getLocalTimeZone());
</script>

<DatePicker minValue={now} maxValue={now.add({ months: 1 })} />

Disabled Dates

Disabled dates are dimmed with opacity-50 and cannot be selected.

mmddyyyy

<script lang="ts">
  import { DatePicker } from 'sv5ui';
  import type { DateValue } from '@internationalized/date';

  // Disable weekends
  const isWeekend = (date: DateValue) => {
    const day = date.toDate('UTC').getUTCDay();
    return day === 0 || day === 6;
  };
</script>

<DatePicker isDateDisabled={isWeekend} />

Time Input

Set timeInput to add a segmented time field below the calendar. The popover stays open for time entry.

mmddyyyy––––AM

<!-- Segmented time field below the calendar.
     The popover stays open for time entry. -->
<DatePicker timeInput />

Locale

jjmmaaaa

年月日

<DatePicker locale="fr" />
<DatePicker locale="ja" />

Calendar Variant

Style the calendar inside the popover, mirroring <Calendar> variants.

mmddyyyy

<DatePicker calendarVariant="solid" />
<DatePicker calendarVariant="soft" />
<DatePicker calendarVariant="subtle" />

Multiple Months

mmddyyyy

<!-- Show two months in the popover -->
<DatePicker numberOfMonths={2} />

Variants

mmddyyyy

<DatePicker variant="outline" />
<DatePicker variant="soft" />
<DatePicker variant="subtle" />
<DatePicker variant="ghost" />

Sizes

mmddyyyy

<DatePicker size="xs" />
<DatePicker size="md" />
<DatePicker size="xl" />

Form Field

Due date

mmddyyyy

Please pick a date

<script lang="ts">
  import { DatePicker, FormField } from 'sv5ui';
  import type { DateValue } from '@internationalized/date';

  let date = $state<DateValue | undefined>(undefined);
  const error = $derived(date ? '' : 'Please pick a date');
</script>

<FormField label="Due date" {error}>
  <DatePicker bind:value={date} name="dueDate" />
</FormField>

UI Slots

Use the ui prop to override classes. Pass ui.calendarSlots to reach the calendar's own slots.

Slot	Description
`root`	`The field wrapper`
`field`	`The segmented date field`
`segment`	`Each editable date segment`
`literal`	`Separators between segments`
`trigger`	`The calendar popover trigger button`
`content`	`The popover content`
`calendar`	`The calendar inside the popover`
`time`	`The time-input row (when timeInput is set)`

Props

Prop	Type	Default	Description
`value`	`DateValue`	`-`	`Selected date (bindable)`
`onValueChange`	`(value) => void`	`-`	`Callback when the date changes`
`placeholder`	`DateValue`	`current date`	`Anchors the empty field and calendar view`
`open`	`boolean`	`false`	`Popover open state (bindable)`
`granularity`	`'day' \| 'hour' \| 'minute' \| 'second'`	`'day'`	`Which segments render`
`hourCycle`	`12 \| 24`	`-`	`Force a 12- or 24-hour clock`
`locale`	`string`	`'en'`	`Locale for formatting`
`minValue`	`DateValue`	`-`	`Earliest selectable date`
`maxValue`	`DateValue`	`-`	`Latest selectable date`
`isDateDisabled`	`DateMatcher`	`-`	`Predicate marking dates as disabled`
`isDateUnavailable`	`DateMatcher`	`-`	`Predicate marking dates as unavailable`
`timeInput`	`boolean`	`false`	`Show a time field below the calendar`
`closeOnDateSelect`	`boolean`	`true`	`Close after selecting (false with timeInput)`
`numberOfMonths`	`number`	`1`	`Months shown in the popover`
`weekStartsOn`	`0-6`	`0`	`First day of the week`
`icon`	`string`	`'lucide:calendar'`	`Trigger button icon`
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'bottom'`	`Popover side`
`align`	`'start' \| 'center' \| 'end'`	`'start'`	`Popover alignment`
`variant`	`'outline' \| 'soft' \| 'subtle' \| 'ghost' \| 'none'`	`'outline'`	`Field visual style`
`calendarVariant`	`'solid' \| 'outline' \| 'soft' \| 'subtle'`	`'solid'`	`Calendar visual style`
`color`	`ColorType`	`'primary'`	`Focus and highlight color`
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	`Field size`
`disabled`	`boolean`	`false`	`Disable interaction`
`readonly`	`boolean`	`false`	`Read-only field`
`required`	`boolean`	`false`	`Required for forms`
`name`	`string`	`-`	`Hidden input name for native submission`
`ref`	`HTMLElement \| null`	`null`	`Bindable reference`
`class`	`string`	`-`	`Additional CSS classes`
`ui`	`Record<Slot, Class>`	`-`	`Override slot classes`

RangeCalendar DateRangePicker