Svelty Picker

https://svelty-picker.vercel.app
Admin
Svelty Picker is a UI component designed for selection, likely a date or time picker, implemented in...
Tokens:7,486
Snippets:53
Trust Score:7.8
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install Svelty Picker

Source: https://svelty-picker.vercel.app/

Install the latest version of svelty-picker using npm. This is the standard installation command.

```bash
npm install svelty-picker
```

--------------------------------

### SveltyPicker Date Binding Example

Source: https://svelty-picker.vercel.app/working-with-dates

This example demonstrates how to bind the `value` property of SveltyPicker using function binding to format and parse dates. It ensures that the internal `date` variable is kept in sync with the picker's selected value.

```svelte
<script>
  import SveltyPicker, { formatDate, parseDate } from 'svelty-picker';
  import { en} from 'svelty-picker/i18n';

	let date = $state((() => {
		let initDate = new Date();
		initDate.setHours(0,0,0);
		return initDate;
	})());
</script>

Selected date: {date}
<SveltyPicker
  mode="date"
  format="yyyy/mm/dd"
  bind:value={
    () => {
      return formatDate(date, 'yyyy/mm/dd', en, 'standard');
    },
    (v) => {
      date = v ? parseDate(v, 'yyyy/mm/dd', en, 'standard') : null;
    }
  }
/>
```

```svelte
<script>
  import SveltyPicker, { formatDate, parseDate } from 'svelty-picker';
  import { en} from 'svelty-picker/i18n';

	let date = $state((() => {
		let initDate = new Date();
		initDate.setHours(0,0,0);
		return initDate;
	})());
</script>

Selected date: {date}
<SveltyPicker
  mode="date"
  format="yyyy/mm/dd"
  bind:value={
    () => {
      return formatDate(date, 'yyyy/mm/dd', en, 'standard');
    },
    (v) => {
      date = v ? parseDate(v, 'yyyy/mm/dd', en, 'standard') : null;
    }
  }
/>
```

--------------------------------

### Install Svelty Picker for Svelte 4

Source: https://svelty-picker.vercel.app/

Install a specific version of svelty-picker compatible with Svelte 4. Use this if you are working with an older Svelte version.

```bash
npm install svelty-picker@5.2.11
```

--------------------------------

### Applying Global and Local Svelty Picker Configurations

Source: https://svelty-picker.vercel.app/global-config

Demonstrates how to set global configuration options for Svelty Picker, such as language and week start day, and how to override these settings for individual picker instances.

```svelte
<script>
	import SveltyPicker, { config } from 'svelty-picker';
	import { de, jp } from 'svelty-picker/i18n';

	// all pickers set to german and to start week on saturday
	config.i18n = de;
	config.weekStart = 6;
</script>

<div style="display:flex;gap:1rem">
	<div>
		<h3>My german picker (global) </h3>
		<SveltyPicker pickerOnly />
	</div>
	<div>
		<h3>Japanese override</h3>
		<SveltyPicker pickerOnly i18n={jp} weekStart={1} />
	</div>
</div>
```

```svelte
<script>
	import SveltyPicker, { config } from 'svelty-picker';
	import { de, jp } from 'svelty-picker/i18n';

	// all pickers set to german and to start week on saturday
	config.i18n = de;
	config.weekStart = 6;
</script>

<div style="display:flex;gap:1rem">
	<div>
		<h3>My german picker (global) </h3>
		<SveltyPicker pickerOnly />
	</div>
	<div>
		<h3>Japanese override</h3>
		<SveltyPicker pickerOnly i18n={jp} weekStart={1} />
	</div>
</div>
```

--------------------------------

### Svelty Picker Component Examples

Source: https://svelty-picker.vercel.app/modes-and-formats

Demonstrates different configurations of the SveltyPicker component, including matching and differing format/displayFormat properties, and a time-only format.

```svelte
<div class="flex">
	<div>
		<div>
			Format === displayFormat<br>Internal value: <code>{valueDefault}</code>
		</div>
		<SveltyPicker bind:value={valueDefault}/>
	</div>
	<div>
		<div>
			Format !== displayFormat<br>Internal value: <code>{valueDifferent}</code>
		</div>
		<SveltyPicker bind:value={valueDifferent} displayFormat="j. n. Y" displayFormatType="php"/>
	</div>
	<div>
		<div>
			Time only format:<br>Internal value: <code>{valueTimeOnly}</code>
		</div>
		<SveltyPicker bind:value={valueTimeOnly} format="hh:ii" displayFormat="HH:ii P"/>
	</div>
</div>
```

--------------------------------

### Configure Svelty Picker with German Locale and Saturday Week Start

Source: https://svelty-picker.vercel.app/localization

This snippet demonstrates how to globally configure the Svelty Picker to use the German locale and set the week to start on Saturday. This configuration affects all Svelty Picker instances on the page unless overridden.

```javascript
import SveltyPicker, { config } from 'svelty-picker';
import { de, jp } from 'svelty-picker/i18n';

// all pickers set to german and to start week on saturday
config.i18n = de;
config.weekStart = 6;
```

--------------------------------

### Migrating Events to Callback Properties

Source: https://svelty-picker.vercel.app/migration-guide

Event dispatchers have been replaced by event callback properties. For example, `on:change` is now `onChange`.

```svelte
<SveltyPicker on:change={fetchEventHandler} /> // [!code --]
<SveltyPicker onChange={fetchEventHandler} /> // [!code ++]
```

--------------------------------

### Svelty Picker Config Type Definition

Source: https://svelty-picker.vercel.app/global-config

Defines the structure of the global configuration object for Svelty Picker. This includes settings for theme, date formatting, minute increments, week start day, CSS classes, and internationalization.

```typescript
type Config = {
  theme: string;
  format: string;
  formatType: string;
  displayFormat: string?;
  displayFormatType: string?;
  minuteIncrement: number;
  weekStart: number;
  inputClasses: string;
  todayBtnClasses: string;
  clearBtnClasses: string;
  hourOnly: boolean;
  todayBtn: boolean;
  clearBtn: boolean;
  autocommit: boolean;
  i18n: i18nType;
}
```

```typescript
type Config = {
  theme: string;
  format: string;
  formatType: string;
  displayFormat: string?;
  displayFormatType: string?;
  minuteIncrement: number;
  weekStart: number;
  inputClasses: string;
  todayBtnClasses: string;
  clearBtnClasses: string;
  hourOnly: boolean;
  todayBtn: boolean;
  clearBtn: boolean;
  autocommit: boolean;
  i18n: i18nType;
}
```

--------------------------------

### Svelty Picker Default Configuration

Source: https://svelty-picker.vercel.app/global-config

Provides the default values for the Svelty Picker configuration. These settings are applied if no custom configuration is specified.

```javascript
export default {
  theme: 'sdt-calendar-colors',
  format: 'yyyy-mm-dd',
  formatType: 'standard',
  displayFormat: null,
  displayFormatType: null,
  minuteIncrement: 1,
  weekStart: 1,
  inputClasses: '',
  todayBtnClasses: 'sdt-action-btn sdt-today-btn',
  clearBtnClasses: 'sdt-action-btn sdt-clear-btn',
  hourOnly: false,
  todayBtn: true,
  clearBtn: true,
  autocommit: true,
  i18n: en
}
```

```javascript
export default {
  theme: 'sdt-calendar-colors',
  format: 'yyyy-mm-dd',
  formatType: 'standard',
  displayFormat: null,
  displayFormatType: null,
  minuteIncrement: 1,
  weekStart: 1,
  inputClasses: '',
  todayBtnClasses: 'sdt-action-btn sdt-today-btn',
  clearBtnClasses: 'sdt-action-btn sdt-clear-btn',
  hourOnly: false,
  todayBtn: true,
  clearBtn: true,
  autocommit: true,
  i18n: en
}
```

--------------------------------

### Default Action Row Implementation

Source: https://svelty-picker.vercel.app/snippets

Provides the default Svelte implementation for the 'actionRow' snippet, rendering 'Today', 'Clear', 'Ok', and 'Cancel' buttons based on configuration.

```svelte
{#snippet action_row({
  autocloseSupported,
  todayBtnClasses,
  clearBtnClasses,
  onCancel,
  onConfirm,
  onClear,
  onToday,
  isTodayDisabled,
  i18n,
  currentMode
})}
  {#if !autocloseSupported || true}
    <div class="sdt-btn-row">
      {#if !autocloseSupported}
      <span>
        <button
          type="button"
          class={clearBtnClasses}
          onclick={onCancel}
        >
          {i18n.cancelBtn}
        </button>
        <button
          type="button"
          class={todayBtnClasses}
          onclick={onConfirm}
        >
          {i18n.okBtn}
        </button>
      </span>
      {/if}
      {#if todayBtn || clearBtn}
      <span>
        {#if todayBtn && currentMode === 'date'}
          <button
            type="button"
            class={todayBtnClasses}
            onclick={onToday}
            disabled={isTodayDisabled}
          >
            {i18n.todayBtn}
          </button>
        {/if}
        {#if clearBtn}
          <button
            type="button"
            class={clearBtnClasses}
            onclick={onClear}
          >
            {i18n.clearBtn}
          </button>
        {/if}
      </span>
      {/if}
    </div>
  {/if}
{/snippet}
```

```svelte
{#snippet action_row({
  autocloseSupported,
  todayBtnClasses,
  clearBtnClasses,
  onCancel,
  onConfirm,
  onClear,
  onToday,
  isTodayDisabled,
  i18n,
  currentMode
})}
  {#if !autocloseSupported || true}
    <div class="sdt-btn-row">
      {#if !autocloseSupported}
      <span>
        <button
          type="button"
          class={clearBtnClasses}
          onclick={onCancel}
        >
          {i18n.cancelBtn}
        </button>
        <button
          type="button"
          class={todayBtnClasses}
          onclick={onConfirm}
        >
          {i18n.okBtn}
        </button>
      </span>
      {/if}
      {#if todayBtn || clearBtn}
      <span>
        {#if todayBtn && currentMode === 'date'}
          <button
            type="button"
            class={todayBtnClasses}
            onclick={onToday}
            disabled={isTodayDisabled}
          >
            {i18n.todayBtn}
          </button>
        {/if}
        {#if clearBtn}
          <button
            type="button"
            class={clearBtnClasses}
            onclick={onClear}
          >
            {i18n.clearBtn}
          </button>
        {/if}
      </span>
      {/if}
    </div>
  {/if}
{/snippet}
```

--------------------------------

### Light Theme CSS Variables for Svelty Picker

Source: https://svelty-picker.vercel.app/theme

Defines CSS variables for the light theme, providing a clean and standard appearance. Customizes elements like the clock, table, and buttons for a light interface.

```css
<style>
  :global(.light) {
    --sdt-bg-main: #fff;
    --sdt-shadow-color: #ccc;
    --sdt-color: inherit;
    --sdt-clock-color: var(--sdt-color);
    --sdt-clock-color-hover: var(--sdt-color);
    --sdt-clock-time-bg: transparent;
    --sdt-clock-time-bg-hover: transparent;
    --sdt-clock-disabled: #b22222;
    --sdt-clock-disabled-bg: var(--sdt-bg-main);
    --sdt-clock-selected-bg: var(--sdt-bg-selected);
    --sdt-bg-selected: #286090;
    --sdt-table-disabled-date: #b22222;
    --sdt-table-disabled-date-bg: var(--sdt-bg-main);
    --sdt-table-data-bg-hover: #eee;
    --sdt-table-selected-bg: var(--sdt-bg-selected);
    --sdt-header-btn-bg-hover: #dfdfdf;
    --sdt-color-selected: #fff;
    --sdt-table-today-indicator: #ccc;
    --sdt-clock-bg: #eeeded;
    /* custom buttons */
    --sdt-today-bg: #1e486d;
    --sdt-today-color: #fff;
    --sdt-clear-color: #dc3545;
    --sdt-clear-bg: #fff;
    --sdt-clear-hover-color: #fff;
    --sdt-clear-hover-bg: #dc3545;
  }
</style>
```

--------------------------------

### Migrating initialDate Property

Source: https://svelty-picker.vercel.app/migration-guide

The `initialDate` property is deprecated in favor of Svelte 5's function bindings. Use `bind:value` directly for more powerful date handling.

```svelte
<SveltyPicker bind:value intialDate={myDate} {...otherProps} />  // [!code --]
<SveltyPicker bind:value {...otherProps} />  // [!code ++]
```

--------------------------------

### Date Helper Functions

Source: https://svelty-picker.vercel.app/working-with-dates

These functions are used for converting between Date objects and strings. They are essential for managing date values, especially when the library expects string inputs.

```javascript
/**
 * String -> date
 *
 * @param {Date|string} date
 * @param {string} format
 * @param {i18nType} i18n
 * @param {string} type
 * @returns {Date}
 */
export function parseDate(date, format, i18n, type) { /* ... */}

/**
 * Date -> string
 *
 * @param {Date} date
 * @param {string} format
 * @param {i18nType} i18n
 * @param {string} type
 * @returns {string}
 */
export function formatDate(date, format, i18n, type) { /* ... */}
```

```javascript
/**
 * String -> date
 *
 * @param {Date|string} date
 * @param {string} format
 * @param {i18nType} i18n
 * @param {string} type
 * @returns {Date}
 */
export function parseDate(date, format, i18n, type) { /* ... */}

/**
 * Date -> string
 *
 * @param {Date} date
 * @param {string} format
 * @param {i18nType} i18n
 * @param {string} type
 * @returns {string}
 */
export function formatDate(date, format, i18n, type) { /* ... */}
```

--------------------------------

### Dark Theme CSS Variables for Svelty Picker

Source: https://svelty-picker.vercel.app/theme

Defines CSS variables for the dark theme, including background, shadow, and text colors. Customizes elements like the clock, table, and buttons for a dark interface.

```css
<style>
  :global(.dark) {
    --sdt-bg-main: #585858;
    --sdt-shadow-color: #777;
    --sdt-color: #eee;
    --sdt-clock-color: var(--sdt-color);
    --sdt-clock-color-hover: var(--sdt-color);
    --sdt-clock-time-bg: transparent;
    --sdt-clock-time-bg-hover: transparent;
    --sdt-clock-disabled: #b22222;
    --sdt-clock-disabled-bg: var(--sdt-bg-main);
    --sdt-clock-selected-bg: var(--sdt-bg-selected);
    --sdt-header-color: #eee;
    --sdt-bg-selected: #e1ac4a;
    --sdt-table-disabled-date: #b22222;
    --sdt-table-disabled-date-bg: var(--sdt-bg-main);
    --sdt-table-data-bg-hover: #777;
    --sdt-table-selected-bg: var(--sdt-bg-selected);
    --sdt-header-btn-bg-hover: #777;
    --sdt-color-selected: #fff;
    --sdt-table-today-indicator: #ccc;
    --sdt-clock-bg: #999;
    /* custom buttons */
    --sdt-today-bg: #e4a124;
    --sdt-today-color: #fff;
    --sdt-clear-color: #666;
    --sdt-clear-bg: #ddd;
    --sdt-clear-hover-color: #fff;
    --sdt-clear-hover-bg: #dc3545;
  }
</style>
```

--------------------------------

### Add Custom Icon with Children Snippet

Source: https://svelty-picker.vercel.app/snippets

Use the 'children' snippet to add custom icons, such as an SVG, to the date picker. Ensure proper positioning of the icon using CSS.

```svelte
<SveltyPicker>
  <svg ... />
</SveltyPicker>
```

```svelte
<SveltyPicker>
  <svg ... />
</SveltyPicker>
```

--------------------------------

### Disabling Dates with startDate and endDate

Source: https://svelty-picker.vercel.app/disabling-dates

Use `startDate` and `endDate` to define an inclusive range of selectable dates. It's recommended to use string formats that match the picker's `format` property.

```javascript
<script>
	import SveltyPicker from 'svelty-picker';

	let startDate = '2024-12-04';
	let endDate = '2024-12-28';

	function disableWeekends(date) {
		return date.getDay() === 0 || date.getDay() === 6
	}
</script>

<SveltyPicker {startDate} {endDate} placeholder="Only December is allowed"/>

<SveltyPicker disableDatesFn={disableWeekends} placeholder="Weekends are disabled"/>

```

--------------------------------

### Svelty Picker CSS Variables

Source: https://svelty-picker.vercel.app/theme

This snippet shows the default CSS variables for customizing the Svelty Picker component. Use these variables to modify colors, shadows, and other visual properties.

```css
:root {
  /* general */
  --sdt-bg-main: #fff; /** wrap background color */
  --sdt-shadow-color: #ccc; /** wrap shadow color */
  --sdt-wrap-shadow: 0 1px 6px var(--sdt-shadow-color); /** wrap shadow settings */
  --sdt-radius: 4px; /** wrap radius */
  --sdt-color: #000; /** data to select(e.g date/time) text color (except header & buttons) */
  --sdt-color-selected: #fff; /** selected data(e.g date/time) text color */
  --sdt-header-color: #000; /** header items color (e.g. text & buttons) */
  --sdt-header-btn-bg-hover: #dfdfdf; /** header items hover background color */
  --sdt-bg-selected: #286090; /** selected data(e.g date/time) background color */

  /* action buttons */
  --sdt-today-bg: #1e486d; /** date picker today button hover background color */
  --sdt-today-color: var(--sdt-bg-main); /** date picker today button text & border color */
  --sdt-clear-color: #dc3545; /** clear button text & border color */
  --sdt-clear-bg: transparent; /** clear button background color */
  --sdt-clear-hover-color: var(--sdt-bg-main); /** clear button hover text color */
  --sdt-clear-hover-bg: #dc3545; /** clear button hover background color */

  /* time picker */
  --sdt-clock-selected-bg: var(--sdt-bg-selected); /** selected time background color */
  --sdt-clock-bg: #eeeded; /** time picker inner circle background color */
  --sdt-clock-color: var(--sdt-color); /** time picker text color (watch "--sdt-color") */
  --sdt-clock-color-hover: var(--sdt-color); /** time picker hover text color (watch "--sdt-color") */
  --sdt-clock-time-bg: transparent; /** time picker time background color */
  --sdt-clock-time-bg-hover: transparent; /** time picker time selection hover background color */
  --sdt-clock-disabled-time: #b22222; /** disabled time picker time text color */
  --sdt-clock-disabled-time-bg: #eee; /** disabled time picker time background color */

  /* date picker */
  --sdt-table-selected-bg: var(--sdt-bg-selected); /** selected date background color */
  --sdt-table-disabled-date: #b22222; /** disabled dates text color */
  --sdt-table-disabled-date-bg: #eee; /** disabled dates background color */
  --sdt-table-bg: transparent; /** date picker inner table background color */
  --sdt-table-data-bg-hover: #eee; /** table selection data hover background color */
  --sdt-table-today-indicator: #ccc; /** date picker current day marker color */

}

```

--------------------------------

### Define Action Row Snippet Type

Source: https://svelty-picker.vercel.app/snippets

Defines the type for the 'actionRow' snippet, outlining the available properties for customizing the button row below the picker.

```typescript
Snippet<[ prop: {
  autocloseSupported: boolean,
  todayBtnClasses: string,
  clearBtnClasses: string,
  onCancel: function,
  onConfirm: function,
  onClear: function,
  onToday: function,
  isTodayDisabled: boolean,
  i18n: import('svelty-picker/i18n').i18nType,
  currentMode: string
}]>
```

```typescript
Snippet<[ prop: {
  autocloseSupported: boolean,
  todayBtnClasses: string,
  clearBtnClasses: string,
  onCancel: function,
  onConfirm: function,
  onClear: function,
  onToday: function,
  isTodayDisabled: boolean,
  i18n: import('svelty-picker/i18n').i18nType,
  currentMode: string
}]>
```

--------------------------------

### onChange Callback Type Definition

Source: https://svelty-picker.vercel.app/properties

Defines the structure of the object passed to the `onChange` event callback. It includes the selected value in various formats and the type of event that triggered the change.

```typescript
type onChangeProperty = {
  value: string|string[],
  dateValue: Date|Date[],
  displayValue: string,
  valueFormat: string,
  displayFormat: string,
  event: 'date'|'hour'|'minute'|'datetime'  // which event triggered the callback
}
```
Tokens:
Raw