Documentation

Vue

Flatpickr

flatpickr is a lightweight and powerful datetime picker. For more details

Installing via npm
npm i flatpickr --save

OR

Direct <script> include

Another way is to directly include it in your html


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

HTML Code

HTML Code for single input Date picker

<input type="text" class="date_flatpicker">

OR

HTML Code for Date range picker

<input type="text" class="range_flatpicker">

OR

HTML Code for Inline Date picker

<input type="text" class="inline_flatpickr">
Script for single date-picker

const datepickers = document.querySelectorAll('.vanila-datepicker')
Array.from(datepickers, (elem) => {
  if(typeof Datepicker !== typeof undefined) {
    new Datepicker(elem)
  }
})
Script for Range date-picker

const daterangePickers = document.querySelectorAll('.vanila-daterangepicker')
Array.from(daterangePickers, (elem) => {
  if(typeof Datepicker !== typeof undefined) {
    new DateRangePicker(elem)
  }
})