Vue FlatPickr - v4.5.7

The Vue FlatPickr datepicker is tied to a standard form input field. In order the Vue FlatPickr datepicker to work, focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input’s value.
Keep reading our Vue FlatPickr Datepicker examples and learn how to use this plugin.

Usage

We used Vue flatpickr which is a wrapper component over one of the most popular open source datepickers Flatpickr

Initialization

<script>
import flatPicker from "vue-flatpickr-component";
import "flatpickr/dist/flatpickr.css";

export default {
  components: {flatPicker}
}
</script>

Single datepicker

<base-input label="Date picker">
  <flat-picker slot-scope="{focus, blur}"
               @on-open="focus"
               @on-close="blur"
               :config="{allowInput: true}"
               class="form-control datepicker"
               v-model="dates.simple">
  </flat-picker>
</base-input>

Range datepicker

<base-input label="Range picker">
  <flat-picker slot-scope="{focus, blur}"
               @on-open="focus"
               @on-close="blur"
               :config="{allowInput: true, mode: 'range',}"
               class="form-control datepicker"
               v-model="dates.range">
  </flat-picker>
</base-input>