Day Picker

A calendar that shows one or more months and selects a single day, several days or a range.

October 2026

<script lang="ts">
	import { DayPicker } from '@sveltery/base/day-picker';
	import styles from './index.module.css';

	let selected = $state<Date>();
</script>

<DayPicker
	mode="single"
	bind:selected
	class={styles.Root}
	classNames={{
		month_caption: styles.Caption,
		nav: styles.Nav,
		button_previous: styles.NavButton,
		button_next: styles.NavButton,
		chevron: styles.Chevron,
		weekday: styles.Weekday,
		day: styles.Day,
		day_button: styles.DayButton,
		today: styles.Today,
		selected: styles.Selected
	}}
/>

Installation

Day Picker computes dates with date-fns and time zones with @date-fns/tz. Both are optional peer dependencies of @sveltery/base, so install them next to it:

npm install date-fns @date-fns/tz

Import Day Picker from its subpath. The @sveltery/base root entry does not export it.

Anatomy

Import the component and use it as a single part:

Anatomy

<script lang="ts">
	import { DayPicker } from '@sveltery/base/day-picker';
</script>

<DayPicker />

Day Picker ports react-day-picker v9.8.1 and takes its props. bind:selected holds a Date in single mode, a Date[] in multiple mode and a { from, to } range in range mode. bind:month holds the first displayed month. defaultSelected and defaultMonth set the starting value of an empty binding. The root, chevron, dayButton, weekNumber and footer snippets replace react-day-picker’s components.

API reference

hidden Matcher | Matcher[] —

Name: hidden
Description: Days that are not rendered.
Type: Matcher | Matcher[]

ISOWeek boolean —

Name: ISOWeek
Description: Use ISO weeks: Monday first, ISO week numbers.
Type: boolean

autofocus boolean —

Name: autofocus
Description: Focus the focus target when the calendar mounts.
Type: boolean

captionLayout CaptionLayout 'label'

Name: captionLayout
Description: Show the caption as a label, or as month and year dropdowns.
Type: CaptionLayout
Default: 'label'

chevron Snippet<[ChevronSnippetProps]> —

Name: chevron
Description: Replaces the chevron icon in the navigation buttons and dropdowns.
Type: Snippet<[ChevronSnippetProps]>

classNames Partial<ClassNames> —

Name: classNames
Description: The class of each part and modifier, replacing defaultClassNames.
Type: Partial<ClassNames>

dayButton Snippet<[DayButtonSnippetProps]> —

Name: dayButton
Description: Replaces the button inside each selectable day.
Type: Snippet<[DayButtonSnippetProps]>

defaultMonth Date —

Name: defaultMonth
Description: The month shown first when month is unset. Read once, at mount. Defaults to the month of today.
Type: Date

defaultSelected Date —

Name: defaultSelected
Description: The day selected first when selected is unset. Read once, at mount.
Type: Date

dir 'ltr' | 'rtl' —

Name: dir
Description: The text direction. It also flips the arrow keys.
Type: 'ltr' | 'rtl'

disableNavigation boolean —

Name: disableNavigation
Description: Disable the navigation buttons and the dropdowns.
Type: boolean

endMonth Date —

Name: endMonth
Description: The latest month the user can navigate to.
Type: Date

excludeDisabled boolean —

Name: excludeDisabled
Description: Restart the range when it would include a disabled day.
Type: boolean

firstWeekContainsDate 1 | 4 —

Name: firstWeekContainsDate
Description: The day of January that the first week must contain. Defaults to the locale's.
Type: 1 | 4

fixedWeeks boolean —

Name: fixedWeeks
Description: Always render six weeks per month.
Type: boolean

Name: footer
Description: Content shown below the months, announced as a live region.
Type: Snippet

formatters Partial<Formatters> —

Name: formatters
Description: Replace the functions that format the caption, days, weekdays and week numbers.
Type: Partial<Formatters>

hideNavigation boolean —

Name: hideNavigation
Description: Do not render the navigation buttons.
Type: boolean

hideWeekdays boolean —

Name: hideWeekdays
Description: Do not render the weekday header row.
Type: boolean

labels Partial<Labels> —

Name: labels
Description: Replace the functions that build the ARIA labels.
Type: Partial<Labels>

locale Locale —

Name: locale
Description: A date-fns locale.
Type: Locale

mode 'single' —

Name: mode
Description: How days are selected: one day, several days or a range. Unset, days are not selectable.
Type: 'single'

modifiers Record<string, Matcher | Matcher[] | undefined> —

Name: modifiers
Description: Custom modifiers. Each name becomes a Modifiers key, and the day gets its class from modifiersClassNames.
Type: Record<string, Matcher | Matcher[] | undefined>

modifiersClassNames Record<string, string> —

Name: modifiersClassNames
Description: The class added to a day for each custom or built-in modifier.
Type: Record<string, string>

month Date —

Name: month
Description: The first displayed month. Use bind:month to read or drive it.
Type: Date
Binding: bind:month

navLayout 'around' | 'after' —

Name: navLayout
Description: around puts the buttons around the caption instead of in a shared nav.
Type: 'around' | 'after'

nonce string —

Name: nonce
Type: string

numberOfMonths number 1

Name: numberOfMonths
Description: How many months to show.
Type: number
Default: 1

onDayBlur DayEventHandler<FocusEvent> —

Name: onDayBlur
Description: Called when a day loses focus.
Type: DayEventHandler<FocusEvent>

onDayClick DayEventHandler<MouseEvent> —

Name: onDayClick
Description: Called when a day is clicked.
Type: DayEventHandler<MouseEvent>

onDayFocus DayEventHandler<FocusEvent> —

Name: onDayFocus
Description: Called when a day gains focus.
Type: DayEventHandler<FocusEvent>

onDayKeyDown DayEventHandler<KeyboardEvent> —

Name: onDayKeyDown
Description: Called on a key press on a day.
Type: DayEventHandler<KeyboardEvent>

onDayMouseEnter DayEventHandler<MouseEvent> —

Name: onDayMouseEnter
Description: Called when the pointer enters a day.
Type: DayEventHandler<MouseEvent>

onDayMouseLeave DayEventHandler<MouseEvent> —

Name: onDayMouseLeave
Description: Called when the pointer leaves a day.
Type: DayEventHandler<MouseEvent>

onMonthChange function —

Name: onMonthChange
Description: Called after the displayed month changes, with the new first month.
Type: (month: Date) => void

onNextClick function —

Name: onNextClick
Description: Called when the next button moves the month.
Type: (month: Date) => void

onPrevClick function —

Name: onPrevClick
Description: Called when the previous button moves the month.
Type: (month: Date) => void

onSelect function —

Name: onSelect
Description: Called after a click changes the selection, with the new selection.
Type: (selected: Date | undefined, triggerDate: Date, modifiers: Modifiers, event: MouseEvent) => void

pagedNavigation boolean —

Name: pagedNavigation
Description: Move by numberOfMonths instead of one month.
Type: boolean

reverseMonths boolean —

Name: reverseMonths
Description: Show the months in reverse order.
Type: boolean

root Snippet<[RootSnippetProps]> —

Name: root
Description: Replaces the root element. Spread props onto it and render props.children inside.
Type: Snippet<[RootSnippetProps]>

selected Date —

Name: selected
Description: Use bind:selected to read or drive it.
Type: Date
Binding: bind:selected

showOutsideDays boolean —

Name: showOutsideDays
Description: Show the days of the months before and after.
Type: boolean

showWeekNumber boolean —

Name: showWeekNumber
Description: Show a column of week numbers.
Type: boolean

startMonth Date —

Name: startMonth
Description: The earliest month the user can navigate to.
Type: Date

timeZone string —

Name: timeZone
Description: An IANA time zone, such as America/New_York. Days are computed in it.
Type: string

today Date —

Name: today
Description: The day marked as today. Defaults to the current date in timeZone.
Type: Date

weekNumber Snippet<[WeekNumberSnippetProps]> —

Name: weekNumber
Description: Replaces the week number cell.
Type: Snippet<[WeekNumberSnippetProps]>

weekStartsOn WeekStartsOn —

Name: weekStartsOn
Description: The first day of the week, 0 for Sunday. Defaults to the locale's.
Type: WeekStartsOn

min number —

Name: min
Description: The fewest days that can stay selected.
Type: number

max number —

Name: max
Description: The most days that can be selected.
Type: number

disabled Matcher | Matcher[] —

Name: disabled
Description: Days that can't be selected.
Type: Matcher | Matcher[]

required boolean —

Name: required
Description: Keep a date selected: clicking the selected day does not clear it.
Type: boolean

focused CalendarDay

Name: focused
Type: CalendarDay

#lastFocused CalendarDay

Name: #lastFocused
Type: CalendarDay

#input DayPickerInput

Name: #input
Type: DayPickerInput

lib DateLib

Name: lib
Type: DateLib

today Date

Name: today
Type: Date

grid GridOptions

Name: grid
Type: GridOptions

#nav [start: Date | undefined, end: Date | undefined]

Name: #nav
Type: [start: Date | undefined, end: Date | undefined]

navStart Date

Name: navStart
Type: Date

navEnd Date

Name: navEnd
Type: Date

firstMonth Date

Name: firstMonth
Type: Date

months CalendarMonth[]

Name: months
Type: CalendarMonth[]

days CalendarDay[]

Name: days
Type: CalendarDay[]

previousMonth Date

Name: previousMonth
Type: Date

nextMonth Date

Name: nextMonth
Type: Date

selected Date | Date[] | DateRange | undefined

Name: selected
Type: Date | Date[] | DateRange | undefined

isSelected function

Name: isSelected
Type: (date: Date) => boolean

#getModifiers function

Name: #getModifiers
Type: (day: CalendarDay) => Modifiers

focusTarget CalendarDay

Name: focusTarget
Description: The day that takes Tab focus when focus enters the grid.
Type: CalendarDay

modifiers function

Name: modifiers
Type: (day: CalendarDay) => Modifiers

isFocusTarget function

Name: isFocusTarget
Type: (day: CalendarDay) => boolean

goToMonth function

Name: goToMonth
Type: (date: Date) => void

goToPrevious function

Name: goToPrevious
Type: () => void

goToNext function

Name: goToNext
Type: () => void

focus function

Name: focus
Type: (day: CalendarDay) => void

blur function

Name: blur
Type: () => void

moveFocus function

Name: moveFocus
Type: (moveBy: MoveFocusBy, moveDir: MoveFocusDir) => void

select function

Name: select
Type: (day: CalendarDay, modifiers: Modifiers, event: MouseEvent) => void

data-selected

On a day cell. Present when the day is selected.

data-disabled

On a day cell. Present when the day is disabled.

data-required

Present when required is set on a selection mode.

data-day

On a day cell. The day's date, as yyyy-MM-dd.

data-focused

On a day cell. Present when the day has focus.

data-hidden

On a day cell. Present when the day is hidden.

data-mode

Present when a selection mode is set.

data-month

On a day cell. The month of an outside day, as yyyy-MM.

data-multiple-months

Present when more than one month is shown.

data-nav-layout

Present when navLayout is set.

data-outside

On a day cell. Present when the day belongs to the month before or after.

data-today

On a day cell. Present when the day is today.

data-week-numbers

Present when week numbers are shown.

Attribute	Description	-
`data-selected`	On a day cell. Present when the day is selected.
`data-disabled`	On a day cell. Present when the day is disabled.
`data-required`	Present when `required` is set on a selection mode.
`data-day`	On a day cell. The day's date, as `yyyy-MM-dd`.
`data-focused`	On a day cell. Present when the day has focus.
`data-hidden`	On a day cell. Present when the day is hidden.
`data-mode`	Present when a selection mode is set.
`data-month`	On a day cell. The month of an outside day, as `yyyy-MM`.
`data-multiple-months`	Present when more than one month is shown.
`data-nav-layout`	Present when `navLayout` is set.
`data-outside`	On a day cell. Present when the day belongs to the month before or after.
`data-today`	On a day cell. Present when the day is today.
`data-week-numbers`	Present when week numbers are shown.