1. framework components
  2. ›
  3. date picker

Date Picker

Select dates from a calendar interface.

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.

28
29
30
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
31
1

Month and Year Selection

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

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 - 
((attributes: HTMLAttributes<"div">) => Element) | undefined
Render the element yourself

RootProvider

Property Default Type
value - 
DatePickerApi<PropTypes>
element - 
((attributes: HTMLAttributes<"div">) => Element) | undefined
Render the element yourself

RootContext

Property Default Type
children - 
(datePicker: DatePickerApi<PropTypes>) => ReactNode

Label

Property Default Type
element - 
((attributes: HTMLAttributes<"label">) => Element) | undefined
Render the element yourself

Control

Property Default Type
element - 
((attributes: HTMLAttributes<"div">) => Element) | undefined
Render the element yourself

PresetTrigger

Property Default Type
value - 
PresetTriggerValue
element - 
((attributes: HTMLAttributes<"button">) => Element) | 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 - 
((attributes: HTMLAttributes<"input">) => Element) | undefined
Render the element yourself

Trigger

Property Default Type
element - 
((attributes: HTMLAttributes<"button">) => Element) | undefined
Render the element yourself

Positioner

Property Default Type
element - 
((attributes: HTMLAttributes<"div">) => Element) | undefined
Render the element yourself

Content

Property Default Type
element - 
((attributes: HTMLAttributes<"div">) => Element) | undefined
Render the element yourself

YearSelect

Property Default Type
element - 
((attributes: HTMLAttributes<"select">) => Element) | undefined
Render the element yourself

MonthSelect

Property Default Type
element - 
((attributes: HTMLAttributes<"select">) => Element) | undefined
Render the element yourself

View

Property Default Type
view - 
DateView
element - 
((attributes: HTMLAttributes<"div">) => Element) | undefined
Render the element yourself

ViewControl

Property Default Type
element - 
((attributes: HTMLAttributes<"div">) => Element) | undefined
Render the element yourself

PrevTrigger

Property Default Type
element - 
((attributes: HTMLAttributes<"button">) => Element) | undefined
Render the element yourself

ViewTrigger

Property Default Type
element - 
((attributes: HTMLAttributes<"button">) => Element) | undefined
Render the element yourself

RangeText

Property Default Type
element - 
((attributes: HTMLAttributes<"div">) => Element) | undefined
Render the element yourself

NextTrigger

Property Default Type
element - 
((attributes: HTMLAttributes<"button">) => Element) | undefined
Render the element yourself

Table

Property Default Type
element - 
((attributes: HTMLAttributes<"table">) => Element) | undefined
Render the element yourself

TableHead

Property Default Type
element - 
((attributes: HTMLAttributes<"thead">) => Element) | undefined
Render the element yourself

TableRow

Property Default Type
element - 
((attributes: HTMLAttributes<"tr">) => Element) | undefined
Render the element yourself

TableHeader

Property Default Type
element - 
((attributes: HTMLAttributes<"th">) => Element) | undefined
Render the element yourself

TableBody

Property Default Type
element - 
((attributes: HTMLAttributes<"tbody">) => Element) | undefined
Render the element yourself

TableCell

Property Default Type
disabled - 
boolean | undefined
value - 
number | DateValue
columns - 
number | undefined
visibleRange - 
VisibleRange | undefined
element - 
((attributes: HTMLAttributes<"td">) => Element) | undefined
Render the element yourself

TableCellTrigger

Property Default Type
element - 
((attributes: HTMLAttributes<"div">) => Element) | undefined
Render the element yourself