svelte-day-picker

A solid calendar component for Svelte

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
svelte-day-picker
0.2.07 days ago4 months agoMinified + gzip package size for svelte-day-picker in KB

Readme

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](https://github.com/unicode-org/cldr/blob/main/common/bcp47/calendar.xml#L12) of a calendar type, or a custom calendar according to the [Temporal Calendar Protocol](https://tc39.es/proposal-temporal/docs/calendar.html#custom-calendars). 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](https://en.wikipedia.org/wiki/Workweek_and_weekend#Friday_weekend_(One_day_weekend)), [nor contiguous](https://en.wikipedia.org/wiki/Workweek_and_weekend#Non-contiguous_working_week).
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