validate date in vuelidate or any other way

Question

I am trying to validate date in vuelidate. I want to select today's date or a date in the past. But it's not working. Here is my minimal code:

import { required, maxValue } from 'vuelidate/lib/validators'

validations: {
    operationalsince: { required, maxValue: maxValue(new Date()) }
},

computed: {
    operationalsinceErrors () {
    !this.$v.operationalsince.maxValue && errors.push('Date is invalid')
}

I also tried v-date-picker attributes:

:max-date="new Date()" :disabled-dates="{ start: new Date(), end: null }"

But I am not achieving what I want to achieve. Thanks for any suggestions.

Answer 1

As far as I can tell the v-date-picker does not support validation error messages, however you can limit the selection with the max, min, or the allowed-dates properties.

The max and min are taking the date in the ISO format (e.g. max="2018-03-20"), so you need to use:

 <v-date-picker
        label="operationalsince"
        v-model="operationalsince"
        :max="new Date().toISOString()"
        @input="$v.operationalsince.$touch()"
        @blur="$v.operationalsince.$touch()"
        required
      ></v-date-picker>

Working CodePen