# Integrations

# cleave.js

For formatting while typing.

The easiest way to integrate Cleave is to use a directive:

<template>
  <Datepicker
    v-model="model"
    v-cleave="{ delimiter: '.', date: true, datePattern: ['d', 'm', 'Y'] }"
    :typeable="true"
    :format="format"
    :name="name"
  />
</template>

<script>
import Cleave from "cleave.js";
import Vue from "vue";

Vue.directive("cleave", {
  inserted(el, binding) {
    // if the binded element is not an input field search for one
    // this is for cases where the input is inside a wrapper
    if (el.tagName !== "INPUT") {
      el = el.querySelector("input");
    }
    // only apply cleave if it is an input field and the options are set
    if (
      el.tagName === "INPUT" &&
      Object.keys(binding.value).length !== 0 &&
      binding.value.constructor === Object
    ) {
      new Cleave(el, binding.value);
    }
  }
});
</script>

# vee-validate 2.x.x

Version

This integration only applies for vee-validate 2.x, and not the latest 3.x version!

For input validation. You can use v-validate with :input-class="fields[name]" to add validation classes to the input field. But the touched event needs to be set manually.

<template>
  <div class="example">
    <DatePicker
      v-model="model"
      v-validate="'required'"
      :typeable="true"
      :format="format"
      :input-class="fields[name]"
      :name="name"
      @blur="touched"
      placeholder="Type or select date"
    />
    <div class="error">
      <span>{{ errors.first(name) }}</span>
    </div>
  </div>
</template>

<script>
import DatePicker from "@sum.cumo/vue-datepicker";

export default {
  name: "VeeValidate",
  components: {
    DatePicker
  },
  data() {
    return {
      model: "",
      name: "datepicker",
      format: "dd.MM.yyyy"
    };
  },
  methods: {
    touched() {
      this.$validator.flag(this.name, {
        untouched: false,
        touched: true
      });
    }
  },
  inject: ["$validator"]
};
</script>