Vee-Validate custom date validation Vee-Validate custom date validation vue.js vue.js

Vee-Validate custom date validation


First, it's maybe some typo error but in your template you use startDate and startdate lowercased.

Then, to answer your question, it's possible to define a custom validator with a date comparison with vee-validate.

As your chosen date format "DD-MM-YYYY" is not a valid javascript Date format, the string dates need to be rewritten into a valid format to make it work.

Vue.use(VeeValidate)new Vue({  el: "#app",  data() {    return {      startDate: '',      endDate: '',    }  },  created() {    let self = this    this.$validator.extend('earlier', {      getMessage(field, val) {        return 'must be earlier than startDate'      },      validate(value, field) {        let startParts = self.startDate.split('-')        let endParts = value.split('-')        let start = new Date(startParts[2], startParts[1] -1, startParts[0]) // month is 0-based        let end = new Date(endParts[2], endParts[1] -1, endParts[0])        return end > start      }    })  },  methods: {    validateBeforeSubmit() {      this.$validator.validateAll().then((result) => {        if (result) {          alert('Form Submitted!');          return;        }        alert('Correct them errors!');      });    }  }})
.is-danger, .text-danger {  color: red;}
<script src="https://unpkg.com/vee-validate@2.0.0-rc.19/dist/vee-validate.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script><div id="app">  <div>    <input type="text" name="startDate" v-model="startDate"v-validate="'required|date_format:DD-MM-YYYY'" :class="{'input': true, 'is-danger': errors.has('startDate') }">    <label class="mb-0" for="startDate">Start Date</label>    <span v-show="errors.has('startDate')" class="text-danger">{{ errors.first('startDate') }}</span>  </div>  <div>    <input type="text" name="endDate" v-model="endDate" v-validate="'required|date_format:DD-MM-YYYY|earlier'" :class="{'input': true, 'is-danger': errors.has('endDate') }">    <label class="mb-0" for="endDate">End Date</label>    <span v-show="errors.has('endDate')" class="text-danger">{{ errors.first('endDate') }}</span>    </div>  <button @click="validateBeforeSubmit">Save</button></div>

Note: i put the custom validator inside the created hook for the example but you can put it inside any file you want in your projet. Just import it correctly as the documentation recommends.