OverviewOfficial Website

Flatpickr is a robust and lightweight datetime picker solution.

Timepickr Examples:
Add Package
npm i vue-flatpickr-component
Import Package
import flatPickr from "vue-flatpickr-component";
Remove Package
npm remove vue-flatpickr-component ( or you can remove package by removing specific package from package.json )
Title Vue
Default Date Picker
<flat-pickr v-model="picked" :first-day-of-week="1" lang="en" confirm class="form-control"></flat-pickr>
Auto close
<flat-pickr v-model="autoClose" :first-day-of-week="1" lang="en" class="form-control"></flat-pickr>
Date Range
<flat-pickr class="form-control" v-model="daterange" range append-to-body lang="en" confirm></flat-pickr>
Month View
<flat-pickr class="form-control" v-model="demoMonth" :startingView="'month'" lang="en" confirm placeholder="Select Month"></flat-pickr>
Year View
<flat-pickr class="form-control" v-model="demoYear" :startingView="'year'" lang="en" confirm placeholder="Select Year"></flat-pickr>
Time View
<flat-pickr class="form-control" v-model="time" :minimumView="'time'" placeholder="hh:mm:ss a"></flat-pickr>
2025 © Skote.