Vee-Validate date type input validation (Bootstrap-vue)

Question

I'm trying to use vee-validate to check if the user is typing a valid date in a bootstrap-vue date input. Followed the vee-validate docs, but seems not to have the expected behaviour

Not working with valid dates nor invalid dates like 31/06/2019 (dd/MM/yyyy)

Here is a codepen example:

https://codepen.io/anon/pen/wVewvK

<b-form-input v-model="selectedDate"
                  placeholder="Enter date"
                  v-validate="'date_format:dd/MM/yyyy'"
                  name="sdate"
                  type="date">
    </b-form-input>

Docs:

https://bootstrap-vue.js.org/docs/reference/validation/#veevalidate

https://baianat.github.io/vee-validate/guide/rules.html#date-format

Answer 1

OK.. just found that in case of input type="date" you don't need to do any format validation. Just the required option of vee-validate will do the job and won't accept any invalid dates

I have updated the codepen:

      <b-form-input :state="!errors.has('sdate')"
                    v-model="selectedDate"
                    placeholder="Enter sdate"
                    v-validate="'required'"
                    name="sdate"
                    type="date">
      </b-form-input>

Answer 2

Native browser date inputs expect a date (as a string) in a certain format, which is YYYY-MM-DD.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

You will need to use a text type input if you want to use a date that is formatted any differently from what the browser expects.

<b-form-input
  v-model="selectedDate"
  placeholder="Enter date"
  v-validate="'date_format:dd/MM/yyyy'"
  name="sdate"
  type="text">
</b-form-input>