OverviewOfficial Website

flatpickr is a lightweight and powerful datetime picker.

Add Package
npm i svelte-flatpickr
import Package
import Flatpickr from 'svelte-flatpickr';
Remove Package
npm remove svelte-flatpickr or you can remove package by removing specific package from package.json
Flatpickr Examples:
Title Template
Basic 
<Flatpickr class="form-control"  options={{enableTime: true,noCalendar: true,dateFormat: "H:i",defaultHour:'11'}} name="date"/>
DateTime 
<Flatpickr class="form-control" options={{'dateFormat': "M, y H:i",showMonths: 1,enableTime: true}} />
Human-Friendly Dates 
<Flatpickr class="form-control" options={{'dateFormat': "M, y H:i",showMonths: 1,enableTime: true}} />
MinDate and MaxDate 
<Flatpickr class="form-control" options={{'dateFormat': "m, y",mode: "single",showMonths: 1,minDate:"09, 2023",maxDate:"10, 2023"}} />
Default Date 
<Flatpickr class="form-control" options={{'dateFormat': "d,m,y",mode: "single",showMonths: 1,inline: true,defaultDate:"05,05,2023"}} />
Disabling Dates 
<Flatpickr class="form-control" options={{'dateFormat': "Y-m-d",mode: "single",showMonths: 1,inline: true,disable:["2023-01-30"]}} />
Selecting Multiple Dates 
<Flatpickr class="form-control" options={{'dateFormat': "d M, y",mode: "multiple",}} placeholder="dd M, yyyy" />
Range 
<Flatpickr class="form-control" options={{'dateFormat': "M, y",mode: "range",showMonths: 2,}} />
Inline 
<Flatpickr class="form-control" options={{'dateFormat': "Y-m-d",mode: "single",showMonths: 1,inline: true}} />
Timepickr Examples:
Title Template
Basic Timepicker 
<Flatpickr class="form-control"  options={{enableTime: true,noCalendar: true,dateFormat: "H:i",defaultHour:'11'}} name="date"  />
24-hour Time Picker 
<Flatpickr class="form-control"  options={{enableTime: true,noCalendar: true,dateFormat: "H:i",defaultHour:'11',time_24hr: true}} name="date"  />
Time Picker w/ Limits 
<Flatpickr class="form-control"  options={{enableTime: true,noCalendar: true,dateFormat: "H:i",minTime: "16:00",maxTime: "22:30",}} name="date"  />
© Skote.