svelte-day-picker Svelte Themes

Svelte Day Picker

Cutomizable calendar component for Svelte, a drop-in replacement for react-day-picker

svelte-day-picker

A solid calendar component for Svelte and drop-in replacement for React Day Picker. Uses the Temporal API to handle dates, although it is also backwards-compatible with Date.

Installation

yarn add svelte-day-picker
# OR
npm install svelte-day-picker

Example Usage

<script>
  import DayPicker, { Mode } from 'svelte-day-picker';
  let selected;
  $: first = selected?.at(0);
  $: last = selected?.at(-1);
</script>
<span>From {first?.toLocaleString()} to {last?.toLocaleString()}</span>
<DayPicker numberOfMonths={2} mode={Mode.Range} bind:selected={selected} />

Try it!

API

<DayPicker />

DayPicker Props

  • locale

    • Type: string | Intl.Locale
    • Default: The user's current locale
    • Description: Selects default calendar options and corresponding translation strings, if available
  • calendar

    • Type: string | Temporal.CalendarProtocol
    • Default: Current locale's calendar — typically 'gregory'
    • Description: Either a Unicode Calendar Identifier of a calendar type, or a custom calendar according to the Temporal Calendar Protocol. Most of the world uses 'gregory' or 'iso8601' (which are almost the same), but other calendar identifiers include 'buddhist', 'chinese', 'hebrew', 'islamic'.
  • timeZone

    • Type: string
    • Default: Current locale's time zone
    • Description: Time zone to resolve today's date.
  • weekStart

    • Type: (enum) DayOfWeek
    • Default: Current locale's week start
    • Description: Which day (Monday, Tuesday, ...) is considered the first day of the week.
  • weekend

    • Type: (enum) DayOfWeek[]
    • Default: Current locale's weekend
    • Description: Days that are considered a weekend. They needen't be two, nor contiguous.
  • numberOfMonths

    • Type: number (positive integer)
    • Default: 1
    • Description: The number of consecutive months to show.
  • defaultMonth

    • Type: Date | Temporal.PlainYearMonthLike
    • Default: The current month.
    • Description: When first loaded, the calendar will show this month.
  • bind:month

    • Type: Date | Temporal.PlainYearMonthLike
    • Description: A bind: propery controling the current month.
  • disableNavigation

    • Type: boolean
    • Default: false
    • Description: Forbid the user from navigating to a different month.
  • density

    • Type: (enum) Density
    • Default: Density.Sparse
    • Description: Typographic density of the UI.
  • mode

    • Type: (enum) Mode
    • Default: Mode.Single
    • Description: Selection mode – whether to select a single day, multiple days or a range.
  • bind:selected

    • Type: Temporal.PlainDate[]
    • Default: []
    • Description: A bind: property containing all the selected dates.
  • bind:selectedRange

    • Type: { from: Temporal.PlainDate, to: Temporal.PlainDate } | undefined
    • Default: undefined
    • Description: A bind: property containing the selected range, if the mode is Mode.Range.
  • disabled

    • Type: Matcher[] | Matcher
    • Default: []
    • Description: Which days should be marked as disabled.
  • hidden

    • Type: Matcher[] | Matcher
    • Default: []
    • Description: Which days should be hidden.
  • today

    • Type: Date | Temporal.PlainDate
    • Default: new Date() (the current date)
    • Description: The day that should be highlighted as the current date.

DayPicker Slots

  • month-title

    • The element that renders above each month. By default it's the month's name (for example “January 2022”) and navigation buttons forward & backward.
    • Default implementation: <MonthTitle />
  • day-heading

    • The days of week that appear as column headers of the calendar.
    • Default implementation <DayHeading />
  • day

    • The individual days in the month.
    • Default implementation <Day />

Roadmap

  • Improve documentation
  • Implement SSR
  • Feature-parity with React Day Picker
  • Improve UX on touch devices
  • Keyboard navigation & ARIA

Top categories

Loading Svelte Themes