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

npm install svelty-picker

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

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;

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

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

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>

By default date picker uses english locale. And at the moment there is only few locales 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>

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>

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

• Bootstrap datepicker for some internal date and format handling

MIT