Datepicker

The datepicker is tied to a standard form input field. 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.

---

We used Vue flatpickr (opens new window) which is a wrapper component over one of the most popular open source datepickers Flatpickr (opens new window)

Initialization:

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

export default {
  components: {flatPicker}
}

Flatpickr can be used in combination with our base-input in order to achieve the same look as other form inputs.

Example

<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>
<script>
    export default {
      data() {
        return {
          dates: {
            simple: "2018-07-17"
          }
        };
      }
    };
</script>

Show Code

Range

<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>
<script>
    export default {
      data() {
        return {
          dates: {
            range: "2018-07-17 to 2018-07-19"
          }
        };
      }
    };
</script>

Show Code

Props

For more info check out Vue flatpickr (opens new window) and Flatpickr website (opens new window)