Vue Datepicker

The Bootstrap datepicker is tied to a standard form input field. In order the Bootstrap 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 Bootstrap Datepicker examples and learn how to use this plugin.

Initialization

Copy

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

export default {
  components: {flatPicker}
}

Single datepicker

Copy

<base-input addon-left-icon="ni ni-calendar-grid-58">
    <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

Copy

<div class="input-daterange datepicker row align-items-center">
    <div class="col">
        <base-input addon-left-icon="ni ni-calendar-grid-58">
            <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>
    </div>
</div>

DateTimePicker PRO

Copy

<base-input addon-left-icon="ni ni-calendar-grid-58">
  <flat-picker slot-scope="{focus, blur}"
               @on-open="focus"
               @on-close="blur"
               :config="{allowInput: true, enableTime: true }"
               class="form-control datepicker"
               v-model="dates.datetime">
  </flat-picker>
</base-input>