Flatpickr

  1. Forms
  2. Flatpickr
OverviewOfficial Website

flatpickr is a lightweight and powerful datetime picker.

Import Package
<!-- import flatpickr -->
import flatPickr from "vue-flatpickr-component";
Add Package
yarn add flatpickr --save
Remove Package
yarn remove flatpickr or you can remove package by removing specific package from package.json
CSS
<!-- css -->
import "flatpickr/dist/flatpickr.css";
Flatpickr Examples
Title Example
Basic 
config: {
    dateFormat: 'd M, Y'
}

<flatPickr class="form-control" :config="config"></flatPickr>
DateTime 
config: {
    enableTime: true, // Enable time selection
    dateFormat: 'd.m.Y H:i', // Set the desired date and time format
}

<flatPickr class="form-control" :config="config"></flatPickr>
Human-Friendly Dates 
config: {
    dateFormat: 'F j, Y'
}

<flatPickr class="form-control" :config="config"></flatPickr>
MinDate and MaxDate 
config: {
    minDate: '2023-05-25', // Set the minimum date
    maxDate: '2023-05-31', // Set the maximum date
    dateFormat: 'd M, Y',
},

<flatPickr class="form-control" :config="config"></flatPickr>
Default Date 
config: {
    defaultDate: '2023-05-25',
    dateFormat: 'd M, Y',
},

<flatPickr class="form-control" :config="config"></flatPickr>
Disabling Dates 
config: {
    disable: [
      new Date().toJSON().slice(0, 10), // Disable a specific date
    ],
    dateFormat: 'Y-m-d', // Set the desired date format
},
                                                        
<flatPickr class="form-control" :config="config"></flatPickr>
Selecting Multiple Dates 
config: {
    mode: 'multiple',
    dateFormat: 'd M, Y'
}

<flatPickr class="form-control" :config="config"></flatPickr>
Range 
config: {
    mode: 'range',
    dateFormat: 'd M, Y'
}

<flatPickr class="form-control" :config="config"></flatPickr>
Inline 
config: {
    inline: true,
    dateFormat: 'd M, Y'
}

<flatPickr class="form-control" :config="config"></flatPickr>
Timepickr Examples
Title Example
Basic Timepicker 
config: {
    enableTime: true,
    noCalendar: true,
    dateFormat: 'H:i',
}
                                                        
<flatPickr class="form-control" :config="config"></flatPickr>
24-hour Time Picker 
config: {
    enableTime: true,
    noCalendar: true,
    dateFormat: 'H:i',
    time_24hr: true
}

<flatPickr class="form-control" :config="config"></flatPickr>
Time Picker w/ Limits 
config: {
    enableTime: true,
    noCalendar: true,
    dateFormat: 'H:i',
    time_24hr: true,
    minTime: '04:00',
    maxTime: '08:00'
}

<flatPickr class="form-control" :config="config"></flatPickr>
Preloading Time 
config: {
    enableTime: true,
    noCalendar: true,
    dateFormat: 'H:i',
}

<flatPickr class="form-control" :config="config"></flatPickr>
Inline 
config: {
    inline: true,
    enableTime: true,
    noCalendar: true,
    dateFormat: 'H:i'
}

<flatPickr class="form-control" :config="config"></flatPickr>
2025 © Velzon.
Design & Develop by Themesbrand