Flatpickr

  1. Forms
  2. Flatpickr
OverviewOfficial Website

flatpickr is a lightweight and powerful datetime picker.

Import Package
<!--Flatepicker-->
import Flatpickr from 'svelte-flatpickr';
Add Package
yarn add svelte-flatpickr --save
Remove Package
yarn remove svelte-flatpickr ( you can remove package by removing specific package from package.json )
Flatpickr Examples
Title HTML
Basic 
<Flatpickr
class="form-control"
options={{
    dateFormat: "d M, Y"
}}
/>
DateTime 
<Flatpickr
class="form-control"
options={{
    enableTime: true,
    dateFormat: "Y-m-d H:i",
}}
/>
Human-Friendly Dates 
<Flatpickr
class="form-control flatpickr-input"
options={{
    altInput: true,
    altFormat: "F j, Y",
    dateFormat: "Y-m-d",
}}
/>
MinDate and MaxDate 
<Flatpickr
class="form-control flatpickr-input"
options={{
    altInput: true,
    altFormat: "F j, Y",
    dateFormat: "Y-m-d",
}}
/>
Default Date 
<Flatpickr
class="form-control flatpickr-input"
options={{
    altInput: true,
    altFormat: "F j, Y",
    dateFormat: "Y-m-d",
}}
/>
Disabling Dates 
<Flatpickr
class="form-control flatpickr-input"
options={{
    altInput: true,
    altFormat: "F j, Y",
    dateFormat: "Y-m-d",
}}
/>
Selecting Multiple Dates 
<Flatpickr
class="form-control"
options={{
    mode: "multiple",
    dateFormat: "Y-m-d"
}}
/>
Range 
<Flatpickr
class="form-control"
options={{
    mode: "range",
    dateFormat: "Y-m-d"
}}
/>
Inline 
<Flatpickr
class="form-control"
options={{
    mode: "range",
    dateFormat: "Y-m-d"
}}
/>
Timepickr Examples
Title HTML
Basic Timepicker 
<Flatpickr
class="form-control"
options={{
    enableTime: true,
    noCalendar: true,
    dateFormat: "H:i",
}}
/>
24-hour Time Picker 
<Flatpickr
class="form-control"
options={{
    enableTime: true,
    noCalendar: true,
    dateFormat: "H:i",
    time_24hr: true
}}
/>
Time Picker w/ Limits 
<Flatpickr
class="form-control"
options={{
    enableTime: true,
    noCalendar: true,
    dateFormat: "H:i",
    minTime: "16:00",
    maxTime: "22:30",
}}
/>
Preloading Time 
<Flatpickr
class="form-control"
options={{
    enableTime: true,
    noCalendar: true,
    dateFormat: "H:i",
    defaultDate: "13:45"
}}
/>
Inline 
<Flatpickr
class="form-control"
options={{
    enableTime: true,
    noCalendar: true,
    inline: true,
}}
/>
© Velzon.
Design & Develop by Themesbrand