button]:bg-neutral-950 [&>button]:text-white dark:[&>button]:bg-white dark:[&>button]:text-neutral-950',
outside: 'text-neutral-400'
}}
/>
```
### CSS Modules
This example shows how to implement the component using CSS Modules.
```css
/* index.module.css */
.Root {
position: relative;
font-size: 0.875rem;
color: oklch(14.5% 0 0deg);
@media (prefers-color-scheme: dark) {
color: white;
}
}
.Caption {
display: flex;
align-items: center;
height: 2rem;
padding-inline: 0.25rem;
font-weight: 500;
}
.Nav {
position: absolute;
top: 0;
right: 0;
display: flex;
gap: 0.25rem;
}
.NavButton,
.DayButton {
width: 2.25rem;
height: 2.25rem;
border: 0;
border-radius: 0.375rem;
background: none;
color: inherit;
font: inherit;
@media (hover: hover) {
&:hover {
background-color: oklch(97% 0 0deg);
@media (prefers-color-scheme: dark) {
background-color: oklch(26.9% 0 0deg);
}
}
}
}
.NavButton {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
fill: currentcolor;
&[aria-disabled='true'] {
opacity: 0.4;
}
}
.Chevron {
width: 1rem;
height: 1rem;
}
.Weekday {
width: 2.25rem;
height: 2.25rem;
font-size: 0.75rem;
font-weight: 400;
color: oklch(55.6% 0 0deg);
}
.Day {
padding: 0;
text-align: center;
}
.DayButton {
&:focus-visible {
outline: 2px solid oklch(14.5% 0 0deg);
outline-offset: 1px;
@media (prefers-color-scheme: dark) {
outline-color: white;
}
}
&:disabled {
opacity: 0.4;
}
}
.Today {
font-weight: 600;
}
.Selected > .DayButton {
background-color: oklch(14.5% 0 0deg);
color: white;
@media (prefers-color-scheme: dark) {
background-color: white;
color: oklch(14.5% 0 0deg);
}
}
```
```svelte
```
## Installation
Day Picker computes dates with [date-fns](https://date-fns.org) and time zones with [@date-fns/tz](https://github.com/date-fns/tz). Both are optional peer dependencies of `@sveltery/base`, so install them next to it:
```bash
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:
```svelte title="Anatomy"
```
Day Picker ports [react-day-picker](https://daypicker.dev) 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
### DayPicker
A calendar that shows one or more months and selects a single day, several days or a range. Renders a `` element.
**DayPicker Props:**
| Prop | Type | Default | Description |
| :-------------------- | :-------------------------------------------------------------------------------------------------- | :-------- | :------------------------------------------------------------------------------------------------------------ |
| hidden | `Matcher \| Matcher[]` | - | Days that are not rendered. |
| ISOWeek | `boolean` | - | Use ISO weeks: Monday first, ISO week numbers. |
| autofocus | `boolean` | - | Focus the focus target when the calendar mounts. |
| captionLayout | `CaptionLayout` | `'label'` | Show the caption as a label, or as month and year dropdowns. |
| chevron | `Snippet<[ChevronSnippetProps]>` | - | Replaces the chevron icon in the navigation buttons and dropdowns. |
| classNames | `Partial` | - | The class of each part and modifier, replacing `defaultClassNames`. |
| dayButton | `Snippet<[DayButtonSnippetProps]>` | - | Replaces the button inside each selectable day. |
| defaultMonth | `Date` | - | The month shown first when `month` is unset. Read once, at mount. Defaults to the month of `today`. |
| defaultSelected | `Date` | - | The day selected first when `selected` is unset. Read once, at mount. |
| dir | `'ltr' \| 'rtl'` | - | The text direction. It also flips the arrow keys. |
| disableNavigation | `boolean` | - | Disable the navigation buttons and the dropdowns. |
| endMonth | `Date` | - | The latest month the user can navigate to. |
| excludeDisabled | `boolean` | - | Restart the range when it would include a disabled day. |
| firstWeekContainsDate | `1 \| 4` | - | The day of January that the first week must contain. Defaults to the locale's. |
| fixedWeeks | `boolean` | - | Always render six weeks per month. |
| footer | `Snippet` | - | Content shown below the months, announced as a live region. |
| formatters | `Partial` | - | Replace the functions that format the caption, days, weekdays and week numbers. |
| hideNavigation | `boolean` | - | Do not render the navigation buttons. |
| hideWeekdays | `boolean` | - | Do not render the weekday header row. |
| labels | `Partial` | - | Replace the functions that build the ARIA labels. |
| locale | `Locale` | - | A date-fns locale. |
| mode | `'single'` | - | How days are selected: one day, several days or a range. Unset, days are not selectable. |
| modifiers | `Record` | - | Custom modifiers. Each name becomes a `Modifiers` key, and the day gets its class from `modifiersClassNames`. |
| modifiersClassNames | `Record` | - | The class added to a day for each custom or built-in modifier. |
| month | `Date` | - | The first displayed month. Use `bind:month` to read or drive it. |
| navLayout | `'around' \| 'after'` | - | `around` puts the buttons around the caption instead of in a shared nav. |
| nonce | `string` | - | - |
| numberOfMonths | `number` | `1` | How many months to show. |
| onDayBlur | `DayEventHandler` | - | Called when a day loses focus. |
| onDayClick | `DayEventHandler` | - | Called when a day is clicked. |
| onDayFocus | `DayEventHandler` | - | Called when a day gains focus. |
| onDayKeyDown | `DayEventHandler` | - | Called on a key press on a day. |
| onDayMouseEnter | `DayEventHandler` | - | Called when the pointer enters a day. |
| onDayMouseLeave | `DayEventHandler` | - | Called when the pointer leaves a day. |
| onMonthChange | `(month: Date) => void` | - | Called after the displayed month changes, with the new first month. |
| onNextClick | `(month: Date) => void` | - | Called when the next button moves the month. |
| onPrevClick | `(month: Date) => void` | - | Called when the previous button moves the month. |
| onSelect | `(selected: Date \| undefined, triggerDate: Date, modifiers: Modifiers, event: MouseEvent) => void` | - | Called after a click changes the selection, with the new selection. |
| pagedNavigation | `boolean` | - | Move by `numberOfMonths` instead of one month. |
| reverseMonths | `boolean` | - | Show the months in reverse order. |
| root | `Snippet<[RootSnippetProps]>` | - | Replaces the root element. Spread `props` onto it and render `props.children` inside. |
| selected | `Date` | - | Use `bind:selected` to read or drive it. |
| showOutsideDays | `boolean` | - | Show the days of the months before and after. |
| showWeekNumber | `boolean` | - | Show a column of week numbers. |
| startMonth | `Date` | - | The earliest month the user can navigate to. |
| timeZone | `string` | - | An IANA time zone, such as `America/New_York`. Days are computed in it. |
| today | `Date` | - | The day marked as today. Defaults to the current date in `timeZone`. |
| weekNumber | `Snippet<[WeekNumberSnippetProps]>` | - | Replaces the week number cell. |
| weekStartsOn | `WeekStartsOn` | - | The first day of the week, `0` for Sunday. Defaults to the locale's. |
| min | `number` | - | The fewest days that can stay selected. |
| max | `number` | - | The most days that can be selected. |
| disabled | `Matcher \| Matcher[]` | - | Days that can't be selected. |
| required | `boolean` | - | Keep a date selected: clicking the selected day does not clear it. |
**DayPicker Data Attributes:**
| Attribute | Type | 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 | `'single' \| 'multiple' \| 'range'` | 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 | `'around' \| 'after'` | 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. |
### DayPicker.Props
Re-export of [DayPicker](/extras/day-picker.md) props.
### DayPicker.State
```typescript
type DayPickerState = {
focused: CalendarDay;
#lastFocused: CalendarDay;
#input: DayPickerInput;
lib: DateLib;
today: Date;
grid: GridOptions;
#nav: [start: Date | undefined, end: Date | undefined];
navStart: Date;
navEnd: Date;
firstMonth: Date;
months: CalendarMonth[];
days: CalendarDay[];
previousMonth: Date;
nextMonth: Date;
selected: Date | Date[] | DateRange | undefined;
isSelected: (date: Date) => boolean;
#getModifiers: (day: CalendarDay) => Modifiers;
/** The day that takes Tab focus when focus enters the grid. */
focusTarget: CalendarDay;
modifiers: (day: CalendarDay) => Modifiers;
isFocusTarget: (day: CalendarDay) => boolean;
goToMonth: (date: Date) => void;
goToPrevious: () => void;
goToNext: () => void;
focus: (day: CalendarDay) => void;
blur: () => void;
moveFocus: (moveBy: MoveFocusBy, moveDir: MoveFocusDir) => void;
select: (day: CalendarDay, modifiers: Modifiers, event: MouseEvent) => void;
};
```
## Additional Types
### CalendarDay
A day in the grid. An outside day belongs to the month before or after `displayMonth`.
```typescript
type CalendarDay = {
date: Date;
displayMonth: Date;
outside: boolean;
/** `yyyy-MM-dd`. */
isoDate: string;
/** `yyyy-MM` of `displayMonth`. */
displayMonthId: string;
/** `yyyy-MM` of `date`. */
dateMonthId: string;
};
```
### CalendarMonth
```typescript
type CalendarMonth = {
/** The first day of the month. */
date: Date;
weeks: CalendarWeek[];
};
```
### CalendarWeek
```typescript
type CalendarWeek = {
weekNumber: number;
days: CalendarDay[];
};
```
### CaptionLayout
```typescript
type CaptionLayout = 'label' | 'dropdown' | 'dropdown-months' | 'dropdown-years';
```
### ChevronSnippetProps
```typescript
type ChevronSnippetProps = {
orientation: 'left' | 'right' | 'up' | 'down';
class: string;
/** Width and height in pixels. Set to `18` in the caption dropdowns, otherwise unset for a 24px icon. */
size?: number;
/** Set on the chevron of a disabled navigation button. */
disabled?: true;
};
```
### ClassNames
```typescript
type ClassNames = {};
```
### DateAfter
Matches the days after `after`.
```typescript
type DateAfter = {
after: Date;
};
```
### DateBefore
Matches the days before `before`.
```typescript
type DateBefore = {
before: Date;
};
```
### DateInterval
Matches the days between `after` and `before`, both excluded. When `after` is later than `before`, matches the days outside them.
```typescript
type DateInterval = {
before: Date;
after: Date;
};
```
### DateLibLike
The formatting surface formatters and labels receive. `DateLib` implements it.
```typescript
type DateLibLike = {
options: DateLibOptions;
format: (date: Date, pattern: string) => string;
};
```
### DateLibOptions
```typescript
type DateLibOptions = {
/** A date-fns locale. Defaults to `enUS`. */
locale?: Locale;
weekStartsOn?: WeekStartsOn;
firstWeekContainsDate?: 1 | 4;
/** An IANA time zone. Dates are created and compared in it. */
timeZone?: string;
};
```
### DateRange
A range of dates. `to` is unset while the user has picked only the start.
```typescript
type DateRange = {
from: Date | undefined;
to?: Date;
};
```
### DayButtonSnippetProps
```typescript
type DayButtonSnippetProps = {
day: CalendarDay;
modifiers: Modifiers;
/** Spread onto the button. Holds the handlers, ARIA, `tabindex` and the attachment that moves focus to it. */
props: Omit & { disabled: true | undefined };
/** The formatted day, such as `12`. */
text: string;
};
```
### DayEventHandler
```typescript
type DayEventHandler = (date: Date, modifiers: Modifiers, event: E) => void;
```
### DayFlag
```typescript
type DayFlag = 'disabled' | 'hidden' | 'outside' | 'focused' | 'today';
```
### DayOfWeek
Matches the days of the week, `0` for Sunday to `6` for Saturday.
```typescript
type DayOfWeek = {
dayOfWeek: number | number[];
};
```
### DayPickerDataAttributes
Data attributes of [DayPicker](/extras/day-picker.md).
```typescript
declare namespace DayPickerDataAttributes {
/**
* Present when a selection mode is set.
* @type 'single' | 'multiple' | 'range'
*/
const mode: 'data-mode';
/** Present when `required` is set on a selection mode. */
const required: 'data-required';
/** Present when more than one month is shown. */
const multipleMonths: 'data-multiple-months';
/** Present when week numbers are shown. */
const weekNumbers: 'data-week-numbers';
/**
* Present when `navLayout` is set.
* @type 'around' | 'after'
*/
const navLayout: 'data-nav-layout';
/** On a day cell. The day's date, as `yyyy-MM-dd`. */
const day: 'data-day';
/** On a day cell. The month of an outside day, as `yyyy-MM`. */
const month: 'data-month';
/** On a day cell. Present when the day is selected. */
const selected: 'data-selected';
/** On a day cell. Present when the day is disabled. */
const disabled: 'data-disabled';
/** On a day cell. Present when the day is hidden. */
const hidden: 'data-hidden';
/** On a day cell. Present when the day belongs to the month before or after. */
const outside: 'data-outside';
/** On a day cell. Present when the day has focus. */
const focused: 'data-focused';
/** On a day cell. Present when the day is today. */
const today: 'data-today';
}
```
### DropdownOption
```typescript
type DropdownOption = {
value: number;
label: string;
disabled: boolean;
};
```
### Formatters
```typescript
type Formatters = {
formatCaption: (month: Date, lib: DateLibLike) => string;
formatDay: (date: Date, lib: DateLibLike) => string;
formatMonthDropdown: (month: Date, lib: DateLibLike) => string;
formatYearDropdown: (year: Date, lib: DateLibLike) => string;
formatWeekdayName: (weekday: Date, lib: DateLibLike) => string;
formatWeekNumber: (weekNumber: number, lib: DateLibLike) => string;
formatWeekNumberHeader: () => string;
};
```
### GridOptions
The options that shape the grid and its navigation.
```typescript
type GridOptions = {
numberOfMonths?: number;
fixedWeeks?: boolean;
ISOWeek?: boolean;
/** The earliest month the user can navigate to. */
startMonth?: Date;
/** The latest month the user can navigate to. */
endMonth?: Date;
captionLayout?: CaptionLayout;
pagedNavigation?: boolean;
reverseMonths?: boolean;
disableNavigation?: boolean;
today?: Date;
};
```
### Labels
```typescript
type Labels = {
labelDayButton: (date: Date, modifiers: Modifiers, lib: DateLibLike) => string;
labelGridcell: (date: Date, modifiers: Modifiers, lib: DateLibLike) => string;
labelGrid: (month: Date, lib: DateLibLike) => string;
labelMonthDropdown: () => string;
labelYearDropdown: () => string;
labelNav: () => string;
labelNext: (month: Date | undefined) => string;
labelPrevious: (month: Date | undefined) => string;
labelWeekday: (weekday: Date, lib: DateLibLike) => string;
labelWeekNumber: (weekNumber: number) => string;
labelWeekNumberHeader: () => string;
};
```
### Matcher
Describes a set of days, as in react-day-picker's `disabled`, `hidden` and `modifiers` props.
```typescript
type Matcher =
| boolean
| ((date: Date) => boolean)
| Date
| Date[]
| DateRange
| DateBefore
| DateAfter
| DateInterval
| DayOfWeek;
```
### Mode
```typescript
type Mode = 'single' | 'multiple' | 'range';
```
### Modifiers
What applies to a day: the built-in flags, the selection states and the custom `modifiers`. `selected` is set only on a selected day, and the range states only while `selected` is a range.
```typescript
type Modifiers = {};
```
### MoveFocusBy
```typescript
type MoveFocusBy = 'day' | 'week' | 'month' | 'year' | 'startOfWeek' | 'endOfWeek';
```
### MoveFocusDir
```typescript
type MoveFocusDir = 'before' | 'after';
```
### MultipleProps
```typescript
type MultipleProps = {
mode: 'multiple';
selected?: Date[];
/** The days selected first when `selected` is unset. Read once, at mount. */
defaultSelected?: Date[];
required?: boolean;
/** The fewest days that can stay selected. */
min?: number;
/** The most days that can be selected. */
max?: number;
onSelect?: (
selected: Date[] | undefined,
triggerDate: Date,
modifiers: Modifiers,
event: MouseEvent
) => void;
};
```
### NoModeProps
```typescript
type NoModeProps = {
mode?: undefined;
selected?: undefined;
defaultSelected?: undefined;
onSelect?: undefined;
};
```
### RangeProps
```typescript
type RangeProps = {
mode: 'range';
selected?: DateRange;
/** The range selected first when `selected` is unset. Read once, at mount. */
defaultSelected?: DateRange;
required?: boolean;
/** The fewest nights a range spans. */
min?: number;
/** The most nights a range spans. */
max?: number;
/** Restart the range when it would include a disabled day. */
excludeDisabled?: boolean;
onSelect?: (
selected: DateRange | undefined,
triggerDate: Date,
modifiers: Modifiers,
event: MouseEvent
) => void;
};
```
### RootSnippetProps
```typescript
type RootSnippetProps = {
/** Spread onto the root element. `children` renders the months and the footer. */
props: HTMLAttributes & { children: Snippet };
};
```
### SelectionState
```typescript
type SelectionState = 'selected' | 'range_start' | 'range_middle' | 'range_end';
```
### SingleProps
```typescript
type SingleProps = {
/** How days are selected: one day, several days or a range. Unset, days are not selectable. */
mode: 'single';
/** Use `bind:selected` to read or drive it. */
selected?: Date;
/** The day selected first when `selected` is unset. Read once, at mount. */
defaultSelected?: Date;
/** Keep a date selected: clicking the selected day does not clear it. */
required?: boolean;
/** Called after a click changes the selection, with the new selection. */
onSelect?: (
selected: Date | undefined,
triggerDate: Date,
modifiers: Modifiers,
event: MouseEvent
) => void;
};
```
### UI
The element keys of `classNames`, with react-day-picker's names.
```typescript
type UI =
| 'root'
| 'chevron'
| 'day'
| 'day_button'
| 'caption_label'
| 'dropdowns'
| 'dropdown'
| 'dropdown_root'
| 'footer'
| 'month_grid'
| 'month_caption'
| 'months_dropdown'
| 'month'
| 'months'
| 'nav'
| 'button_next'
| 'button_previous'
| 'week'
| 'weeks'
| 'weekday'
| 'weekdays'
| 'week_number'
| 'week_number_header'
| 'years_dropdown';
```
### WeekNumberSnippetProps
```typescript
type WeekNumberSnippetProps = {
week: CalendarWeek;
/** Spread onto the cell. */
props: HTMLThAttributes;
/** The formatted week number, such as `07`. */
text: string;
};
```
### WeekStartsOn
```typescript
type WeekStartsOn = 0 | 1 | 2 | 3 | 4 | 5 | 6;
```