svelte-day-picker

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} />

<DayPicker />

DayPicker Props

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

* 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'`.

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

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

* 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).

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

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

* Type: `Date | Temporal.PlainYearMonthLike`
* Description: A `bind:` propery controling the current month.

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

* Type: (enum) `Density`
* Default: `Density.Sparse`
* Description: Typographic density of the UI.

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

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

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

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

* Type: `Matcher[] | Matcher`
* Default: `[]`
* Description: Which days should be hidden.

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

DayPicker Slots

* 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 />`

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

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