1. framework components
  2. ›
  3. date picker

Date Picker

Select dates from a calendar interface.

Usage

Given the scale and scope of the Date Picker component, consider implementing within a local component to add a layer of abstraction. Then utlize the props and event handlers to pass data to and from the component respectively.

Controlled

Manage the selected date value with controlled 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. Pair with two inputs fields:

  • index={0} to represent the start dates.
  • index={1} to represent the end dates.

Presets

Use the PresetTrigger component to allow users to quickly select predefined date ranges.

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
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
2
3
4
5
6

Month and Year Selection

Add MonthSelect and YearSelect components to provide selectors for quickly changing the month and year.

Anatomy

Here’s an overview of how the DatePicker component is structured in code:

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

<DatePicker>
	<DatePicker.Label />
	<DatePicker.Control>
		<DatePicker.Input />
		<DatePicker.Trigger />
	</DatePicker.Control>
	<Portal>
		<DatePicker.Positioner>
			<DatePicker.Content>
				<DatePicker.YearSelect />
				<DatePicker.MonthSelect />
				<DatePicker.View>
					<DatePicker.ViewControl>
						<DatePicker.PrevTrigger />
						<DatePicker.ViewTrigger>
							<DatePicker.RangeText />
						</DatePicker.ViewTrigger>
						<DatePicker.NextTrigger />
					</DatePicker.ViewControl>
					<DatePicker.Table>
						<DatePicker.TableHead>
							<DatePicker.TableRow>
								<DatePicker.TableHeader />
							</DatePicker.TableRow>
						</DatePicker.TableHead>
						<DatePicker.TableBody>
							<DatePicker.TableRow>
								<DatePicker.TableCell>
									<DatePicker.TableCellTrigger />
								</DatePicker.TableCell>
							</DatePicker.TableRow>
						</DatePicker.TableBody>
					</DatePicker.Table>
				</DatePicker.View>
			</DatePicker.Content>
		</DatePicker.Positioner>
	</Portal>
</DatePicker>

API Reference

Root

Prop Default Type
locale "en-US" string | undefined

The locale (BCP 47 language tag) to use when formatting the date.
createCalendar — ((identifier: CalendarIdentifier) => Calendar) | undefined

A function that creates a Calendar object for a given calendar identifier. Enables non-Gregorian calendar support (Persian, Buddhist, Islamic, etc.) without bundling all calendars by default.
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.
required — boolean | undefined

Whether the date picker is required
invalid — boolean | undefined

Whether the date picker is invalid
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`.
openOnClick false boolean | undefined

Whether to open the calendar when the input is clicked.
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.
showWeekNumbers — boolean | undefined

Whether to show the week number column in the day view.
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.
onVisibleRangeChange — ((details: VisibleRangeChangeDetails) => void) | undefined

Function called when the visible range 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
maxSelectedDates — number | undefined

The maximum number of dates that can be selected. This is only applicable when `selectionMode` is `multiple`.
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

Provider

Prop Default Type
value — () => DatePickerApi<PropTypes>

element — Snippet<[HTMLAttributes<"div">]> | undefined

Render the element yourself

Context

Prop Default Type
children — Snippet<[() => DatePickerApi<PropTypes>]>

Label

Prop Default Type
element — Snippet<[HTMLAttributes<"label">]> | undefined

Render the element yourself

Control

Prop Default Type
element — Snippet<[HTMLAttributes<"div">]> | undefined

Render the element yourself

PresetTrigger

Prop Default Type
value — PresetTriggerValue

element — Snippet<[HTMLAttributes<"button">]> | undefined

Render the element yourself

Input

Prop 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

Prop Default Type
element — Snippet<[HTMLAttributes<"button">]> | undefined

Render the element yourself

Positioner

Prop Default Type
element — Snippet<[HTMLAttributes<"div">]> | undefined

Render the element yourself

Content

Prop Default Type
element — Snippet<[HTMLAttributes<"div">]> | undefined

Render the element yourself

YearSelect

Prop Default Type
element — Snippet<[HTMLAttributes<"select">]> | undefined

Render the element yourself

MonthSelect

Prop Default Type
element — Snippet<[HTMLAttributes<"select">]> | undefined

Render the element yourself

View

Prop Default Type
view — DateView | undefined

element — Snippet<[HTMLAttributes<"div">]> | undefined

Render the element yourself

ViewControl

Prop Default Type
element — Snippet<[HTMLAttributes<"div">]> | undefined

Render the element yourself

PrevTrigger

Prop Default Type
element — Snippet<[HTMLAttributes<"button">]> | undefined

Render the element yourself

ViewTrigger

Prop Default Type
element — Snippet<[HTMLAttributes<"button">]> | undefined

Render the element yourself

RangeText

Prop Default Type
element — Snippet<[HTMLAttributes<"div">]> | undefined

Render the element yourself

NextTrigger

Prop Default Type
element — Snippet<[HTMLAttributes<"button">]> | undefined

Render the element yourself

Table

Prop Default Type
element — Snippet<[HTMLAttributes<"table">]> | undefined

Render the element yourself

TableHead

Prop Default Type
element — Snippet<[HTMLAttributes<"thead">]> | undefined

Render the element yourself

TableRow

Prop Default Type
element — Snippet<[HTMLAttributes<"tr">]> | undefined

Render the element yourself

TableHeader

Prop Default Type
element — Snippet<[HTMLAttributes<"th">]> | undefined

Render the element yourself

TableBody

Prop Default Type
element — Snippet<[HTMLAttributes<"tbody">]> | undefined

Render the element yourself

TableCell

Prop Default Type
disabled — boolean | undefined

value — number | DateValue

columns — number | undefined

visibleRange — VisibleRange | undefined

element — Snippet<[HTMLAttributes<"td">]> | undefined

Render the element yourself

TableCellTrigger

Prop Default Type
element — Snippet<[HTMLAttributes<"div">]> | undefined

Render the element yourself
View page on GitHub