DatePicker
kumo-svelte

DatePicker

A date selection calendar supporting single, multiple, and range selection modes.

Installation

Barrel

import { DatePicker } from 'kumo-svelte';

Granular

import { DatePicker } from 'kumo-svelte/components/date-picker';

Usage

DatePicker supports three selection modes: `single`, `multiple`, and `range`.

<script lang="ts">  import { DatePicker } from 'kumo-svelte';  let date = $state<Date | undefined>();</script><DatePicker mode="single" selected={date} onChange={(d) => (date = d as Date | undefined)} />

Examples

Single Date Selection

Select a single date. The most common use case for date pickers.

Multiple Date Selection

Select multiple individual dates. Use `max` to limit the number of selections.

Date Range Selection

Select a continuous range of dates. Works well with `numberOfMonths=2` for a side-by-side view.

Range with Min/Max Constraints

Constrain the range length using `min` and `max` props (in days/nights).

With Popover

Compose with the [Popover](/components/popover) component to create a dropdown date picker.

Date Range with Popover

A date range picker in a popover with two months displayed.

Date Range with Presets

Combine the date picker with preset options for quick selection.

Disabled Dates with Usage Limits

Use the `disabled` prop to make certain dates unselectable, and `footer` to display usage information.

Full Popover Example

Here's a complete example showing how to compose DatePicker with Popover:

<script lang="ts">  import { Button, DatePicker, Popover } from 'kumo-svelte';  import { CalendarDotsIcon } from 'phosphor-svelte';  let date = $state<Date | undefined>();</script><Popover class="p-3">  {#snippet trigger(props)}    <Button variant="outline" icon={CalendarDotsIcon} {...props}>      {date ? date.toLocaleDateString() : 'Pick a date'}    </Button>  {/snippet}  <DatePicker mode="single" selected={date} onChange={(d) => (date = d as Date | undefined)} /></Popover>

API Reference

DatePicker mirrors the original Kumo calendar API. Key props include:

  • `mode` — "single" | "multiple" | "range" — Selection mode (required)
  • `selected` — Currently selected date(s)
  • `onChange` — Callback when selection changes
  • `numberOfMonths` — Number of months to display
  • `disabled` — Dates that cannot be selected
  • `min` / `max` — Min/max selection constraints
  • `footer` — Content rendered below the calendar
  • `locale` — Locale string for internationalization
  • `className` — Additional CSS classes

See the react-day-picker documentation for the full upstream API.

Differences from react-day-picker

For consistency with other Kumo form components, DatePicker uses `onChange` instead of react-day-picker's `onSelect`.