Overview

DatePicker renders a text input that opens a floating calendar panel next to it - no full-screen modal, no scroll-lock. All state and logic lives in a plain DatePicker class backed by Svelte stores, so the component itself stays a thin view over that state.

Installation

yarn add @whizzes/svelte-datepicker

Usage

<script lang="ts">
  import { DatePicker } from '@whizzes/svelte-datepicker';

  function datepicked(detail) {
    console.log(detail.datepicked); // '2026-07-26'
  }
</script>

<DatePicker ondatepicked={datepicked} locale="en-US" />

Props

Prop	Type	Default	Description
`ondatepicked`	`(detail: { datepicked: string }) => void`	`-`	Called whenever the selected date changes. `detail.datepicked` is the ISO 8601 date string (YYYY-MM-DD).
`customclass`	`string`	`''`	Extra CSS class(es) applied to the text input, alongside the built-in styles.
`theme`	`Partial<DatePickerTheme>`	`DEFAULT_DATE_PICKER_THEME`	Overrides any subset of the visual theme - see Theming below.
`locale`	`Intl.LocalesArgument`	`'en-GB'`	BCP 47 locale tag used to format weekday names, month names and the input text.

Theming

Every visual aspect is a CSS custom property, set via the theme prop - only pass the fields you want to override:

<DatePicker theme={{ accentBackground: '#059669', selectedBackground: '#e11d48' }} />

Field	Default
`overlayBackground`	`rgba(0, 0, 0, 0.4)`
`panelBackground`	`#ffffff`
`textColor`	`#1f2937`
`mutedTextColor`	`#6b7280`
`accentBackground`	`#4338ca`
`accentTextColor`	`#ffffff`
`selectedBackground`	`#e11d48`
`selectedTextColor`	`#ffffff`
`hoverBackground`	`#6366f1`
`borderRadius`	`0.25rem`
`boxShadow`	`0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1)`
`fontFamily`	`sans-serif`
`fontSize`	`1rem`
`inputBackground`	`#ffffff`
`inputTextColor`	`#1f2937`
`inputBorderColor`	`#d1d5db`

Locale & i18n

Pass any BCP 47 tag ("es-ES", "ja-JP", "ar-MA", ...) via the locale prop. Weekday headers, month names and the text rendered in the input all follow it - the value emitted to ondatepicked stays a plain ISO date string regardless of locale.

Playground

Tweak the props below and watch the live instance update.

Picked: -

Examples

Picked: -

DatePicker example

en-US

Ejemplo del DatePicker

es-ES

DatePicker példa

hu-HU

Exemplo do DatePicker

pt-BR

DatePickerの例

ja-JP

DatePicker 示例

zh-CN

مثال على DatePicker

ar-MA

Exemple de DatePicker

fr-FR

DatePicker Beispiel

de-DE