Svelte Datepicker

The Svelte datepicker is tied to a standard form input field. In order the Svelte datepicker to work, focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input’s value.
Keep reading our Svelte Datepicker examples and learn how to use this plugin.

Usage

We used Svelte flatpickr which is a wrapper component over one of the most popular open source datepickers Flatpickr

Initialization

Copy

<script>
import Flatpickr from "svelte-flatpickr";
import "~@flatpickr/dist/flatpickr.css";
import "~@flatpickr/dist/themes/light.css";

const flatpickrOptions = {
  enableTime: true,
  onChange: (selectedDates, dateStr, instance) => {}
};
function handleChange(selectedDates, dateStr, instance) {}


</script>

Single datepicker

Copy

<script>
let dates = {
  simple: new Date(),
  range: "2019-04-19 to 2019-04-24"
};

const flatpickrOptions = {
  enableTime: true,
  onChange: (selectedDates, dateStr, instance) => {}
};
</script>

<BaseInput label="Date picker">
  <Flatpickr
    options={flatpickrOptions}
    class="form-control datepicker bg-white"
    bind:value={date}
    dateFormat="Y-m-d"
    placeholder={dates.simple}
    on:change={event => handleChange(event)} />
</BaseInput>

Range datepicker

Copy

<script>
let dates = {
  simple: new Date(),
  range: "2019-04-19 to 2019-04-24"
};

const flatpickrOptionsRange = {
  mode: "range",
  enableTime: true,
  onChange: (selectedDates, dateStr, instance) => {}
};
</script>

<BaseInput label="Range picker">
  <Flatpickr
    options={flatpickrOptionsRange}
    class="form-control datepicker bg-white"
    defaultDate={dates.range}
    placeholder={dates.range}
    dateFormat="Y-m-d"
    on:change={event => handleChange(event)} />
</BaseInput>