1. components
  2. ›
  3. date picker
  4. ›
  5. svelte

Date Picker

Select dates from a calendar interface.

CSS React Svelte Doc API LLM

Warning

This feature is currently in a beta status and not intended for production use. It may receive breaking changes before its stable release.

Controlled

Manage the selected date value with Svelte state.

Disabled

Disable the date picker to prevent user interaction.

Minimum and Maximum

Restrict date selection to a specific range using the min and max props with the parseDate helper function.

Range Selection

Enable range selection by setting selectionMode="range" on the root component. Use two input fields with index={0} and index={1} to represent the start and end dates.

Inline calendar

Display the calendar inline without a popover by adding the inline prop to the root component. When using inline mode, omit the Portal and Positioner components.

26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6

Month and Year Selection

Optionally add <DatePicker.MonthSelect /> and <DatePicker.YearSelect /> components to provide dropdown selectors for quickly changing the month and year.

Guidelines

Portal

The Date Picker content is rendered inside a Portal component by default to avoid z-index stacking issues. The Portal renders the content at the end of the document body.

Views

The Date Picker supports three different views:

  • Day view - Select a specific day from the calendar
  • Month view - Select a month by clicking the view trigger when in day view
  • Year view - Select a year by clicking the view trigger when in month view

Use the <DatePicker.View> component with the view prop to define each view’s layout.

Context

The <DatePicker.Context> component provides access to the date picker API for rendering dynamic content like weeks, months, and years grids. Use the children snippet pattern to access the API.

Parse Date

Use the parseDate helper function to convert strings or Date objects to the appropriate date format. Zag.js adjusts this using @internationalized/date under the hood.

<script lang="ts">
  import { parseDate } from '@skeletonlabs/skeleton-svelte';


  const date = parseDate('2025-10-15');
  const minDate = parseDate('2024-01-01');
  const maxDate = parseDate('2024-12-31');
</script>

API Reference

Root

Property Default Type
locale "en-US" 
string | undefined
The locale (BCP 47 language tag) to use when formatting the date.
translations - 
IntlTranslations | undefined
The localized messages to use.
ids - 
Partial<{ root: string; label: (index: number) => string; table: (id: string) => string; tableHeader: (id: string) => string; tableBody: (id: string) => string; tableRow: (id: string) => string; ... 11 more ...; positioner: string; }> | undefined
The ids of the elements in the date picker. Useful for composition.
name - 
string | undefined
The `name` attribute of the input element.
timeZone "UTC" 
string | undefined
The time zone to use
disabled - 
boolean | undefined
Whether the calendar is disabled.
readOnly - 
boolean | undefined
Whether the calendar is read-only.
outsideDaySelectable false 
boolean | undefined
Whether day outside the visible range can be selected.
min - 
DateValue | undefined
The minimum date that can be selected.
max - 
DateValue | undefined
The maximum date that can be selected.
closeOnSelect true 
boolean | undefined
Whether the calendar should close after the date selection is complete. This is ignored when the selection mode is `multiple`.
value - 
DateValue[] | undefined
The controlled selected date(s).
defaultValue - 
DateValue[] | undefined
The initial selected date(s) when rendered. Use when you don't need to control the selected date(s) of the date picker.
focusedValue - 
DateValue | undefined
The controlled focused date.
defaultFocusedValue - 
DateValue | undefined
The initial focused date when rendered. Use when you don't need to control the focused date of the date picker.
numOfMonths - 
number | undefined
The number of months to display.
startOfWeek - 
number | undefined
The first day of the week. `0` - Sunday `1` - Monday `2` - Tuesday `3` - Wednesday `4` - Thursday `5` - Friday `6` - Saturday
fixedWeeks - 
boolean | undefined
Whether the calendar should have a fixed number of weeks. This renders the calendar with 6 weeks instead of 5 or 6.
onValueChange - 
((details: ValueChangeDetails) => void) | undefined
Function called when the value changes.
onFocusChange - 
((details: FocusChangeDetails) => void) | undefined
Function called when the focused date changes.
onViewChange - 
((details: ViewChangeDetails) => void) | undefined
Function called when the view changes.
onOpenChange - 
((details: OpenChangeDetails) => void) | undefined
Function called when the calendar opens or closes.
isDateUnavailable - 
((date: DateValue, locale: string) => boolean) | undefined
Returns whether a date of the calendar is available.
selectionMode "single" 
SelectionMode | undefined
The selection mode of the calendar. - `single` - only one date can be selected - `multiple` - multiple dates can be selected - `range` - a range of dates can be selected
format - 
((date: DateValue, details: LocaleDetails) => string) | undefined
The format of the date to display in the input.
parse - 
((value: string, details: LocaleDetails) => DateValue | undefined) | undefined
Function to parse the date from the input back to a DateValue.
placeholder - 
string | undefined
The placeholder text to display in the input.
view - 
DateView | undefined
The view of the calendar
defaultView "day" 
DateView | undefined
The default view of the calendar
minView "day" 
DateView | undefined
The minimum view of the calendar
maxView "year" 
DateView | undefined
The maximum view of the calendar
positioning - 
PositioningOptions | undefined
The user provided options used to position the date picker content
open - 
boolean | undefined
The controlled open state of the date picker
defaultOpen - 
boolean | undefined
The initial open state of the date picker when rendered. Use when you don't need to control the open state of the date picker.
inline - 
boolean | undefined
Whether to render the date picker inline
dir "ltr" 
"ltr" | "rtl" | undefined
The document's text/writing direction.
getRootNode - 
(() => ShadowRoot | Node | Document) | undefined
A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
element - 
Snippet<[HTMLAttributes<"div">]> | undefined
Render the element yourself

RootProvider

Property Default Type
value - 
() => DatePickerApi<PropTypes>
element - 
Snippet<[HTMLAttributes<"div">]> | undefined
Render the element yourself

RootContext

Property Default Type
children - 
Snippet<[() => DatePickerApi<PropTypes>]>

Label

Property Default Type
element - 
Snippet<[HTMLAttributes<"label">]> | undefined
Render the element yourself

Control

Property Default Type
element - 
Snippet<[HTMLAttributes<"div">]> | undefined
Render the element yourself

PresetTrigger

Property Default Type
value - 
PresetTriggerValue
element - 
Snippet<[HTMLAttributes<"button">]> | undefined
Render the element yourself

Input

Property Default Type
index - 
number | undefined
The index of the input to focus.
fixOnBlur true 
boolean | undefined
Whether to fix the input value on blur.
element - 
Snippet<[HTMLAttributes<"input">]> | undefined
Render the element yourself

Trigger

Property Default Type
element - 
Snippet<[HTMLAttributes<"button">]> | undefined
Render the element yourself

Positioner

Property Default Type
element - 
Snippet<[HTMLAttributes<"div">]> | undefined
Render the element yourself

Content

Property Default Type
element - 
Snippet<[HTMLAttributes<"div">]> | undefined
Render the element yourself

YearSelect

Property Default Type
element - 
Snippet<[HTMLAttributes<"select">]> | undefined
Render the element yourself

MonthSelect

Property Default Type
element - 
Snippet<[HTMLAttributes<"select">]> | undefined
Render the element yourself

View

Property Default Type
view - 
DateView | undefined
element - 
Snippet<[HTMLAttributes<"div">]> | undefined
Render the element yourself

ViewControl

Property Default Type
element - 
Snippet<[HTMLAttributes<"div">]> | undefined
Render the element yourself

PrevTrigger

Property Default Type
element - 
Snippet<[HTMLAttributes<"button">]> | undefined
Render the element yourself

ViewTrigger

Property Default Type
element - 
Snippet<[HTMLAttributes<"button">]> | undefined
Render the element yourself

RangeText

Property Default Type
element - 
Snippet<[HTMLAttributes<"div">]> | undefined
Render the element yourself

NextTrigger

Property Default Type
element - 
Snippet<[HTMLAttributes<"button">]> | undefined
Render the element yourself

Table

Property Default Type
element - 
Snippet<[HTMLAttributes<"table">]> | undefined
Render the element yourself

TableHead

Property Default Type
element - 
Snippet<[HTMLAttributes<"thead">]> | undefined
Render the element yourself

TableRow

Property Default Type
element - 
Snippet<[HTMLAttributes<"tr">]> | undefined
Render the element yourself

TableHeader

Property Default Type
element - 
Snippet<[HTMLAttributes<"th">]> | undefined
Render the element yourself

TableBody

Property Default Type
element - 
Snippet<[HTMLAttributes<"tbody">]> | undefined
Render the element yourself

TableCell

Property Default Type
disabled - 
boolean | undefined
value - 
number | DateValue
columns - 
number | undefined
visibleRange - 
VisibleRange | undefined
element - 
Snippet<[HTMLAttributes<"td">]> | undefined
Render the element yourself

TableCellTrigger

Property Default Type
element - 
Snippet<[HTMLAttributes<"div">]> | undefined
Render the element yourself