📆 Svelty Picker

Simple date & time picker implemented in svelte.

Features:

• datepicker
• timepicker (with meridian support)
• various formatting options
• keyboard navigation
• includes <input> element
• easily themable
• restriction by start and end date
• validator action for <input> using svelte-use-forms (optional)
• custom element

⚙️ Install

npm install svelty-picker

👀 Example

<script>
  import SveltyPicker from 'svelty-picker'
  
  let myDate = '2021-11-11';
</script>

<SveltyPicker inputClasses="form-control" format="yyyy-mm-dd hh:ii" bind:value={myDate}></SveltyPicker>

Try yourself in REPL.

📓 Options

Note: Properties starting by theme to i18n are configurable globally by overriding it in globally available config

import { config } from 'svelty-picker';

// set new locale 
config.i18n = {
  // my localization object
}
// default for all pickers in the app
config.todayBtn = false;

Format settings

Date format can be defined under formatType property. It has two options: standard and php, where standard is the default.

standard format settings:

php format settings:

CSS variables

/** defaults */
.sdt-calendar-colors {
  --sdt-primary: #286090;
  --sdt-color: #000;
  --sdt-bg-main: #fff;
  --sdt-bg-today: var(--sdt-primary);
  --sdt-bg-clear: #dc3545;
  --sdt-today-bg: #1e486d;
  --sdt-clear-color: #dc3545;
  --sdt-btn-bg-hover: #eee;
  --sdt-btn-header-bg-hover: #dfdfdf;
  --sdt-clock-bg: #eeeded;
  --sdt-clock-bg-minute: rgb(238, 237, 237, 0.25);
  --sdt-clock-bg-shadow: 0 0 128px 2px #ddd inset;
  --sdt-shadow: #ccc;
  --sdt-disabled-date: #b22222;
}

🗯️ Events

Component emits input, change and blur events.

• input is dispatched on <input> element therefore you can get current value like from every native event:
• change event is using Svelte's eventDispatcher, therefore triggered event contains detail property

<script>
function onInput(event) {
  console.log(event.target.value) // logs currently selected date or empty string
}

function onChange(event) {
  console.log(event.detail) // logs currently selected date or null
}
</script>

<SveltyPicker on:input={onInput} on:change={onChange}></SveltyPicker>

🌐 Localization

By default date picker uses english locale. And at the moment there are only en and de localizations available (PRs for additional locales are more than welcome).

So if you want to change it to german (or other locale in the future), use this:

<script>
  import SveltyPicker from 'svelty-picker.svelte';
  import { de } from 'svelty-picker/i18n';
</script>

<SveltyPicker i18n={de}></SveltyPicker>

Global locale setting

You can also change locale globally through setting i18n property in global config like below. So all pickers created AFTER this setting has been changed, will be in the new locale.

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

  // all pickers in the app will have german locale set
  config.i18n = de;
</script>

<SveltyPicker></SveltyPicker>

Adding additional locales

Localization file has following structure.

// default i18n structure
export const en = {
  days:        ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
  daysShort:   ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  daysMin:     ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
  months:      ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  meridiem:    ['am', 'pm'],
  suffix:      ['st', 'nd', 'rd', 'th'],
  todayBtn:    'Today',
  clearBtn:    'Clear',
  timeView:    'Show time view',
  backToDate:  'Back to calendar view'
}

🏆 Thanks to:

• Bootstrap datepicker for some internal date and format handling

Licence:

MIT