[Vuejs]-V-model on input tag w/ type date

by

3👍

✅

EDIT:

I ran into this issue about a year ago, I am not sure why any changes made to email would affect date. I did the exact same thing in the composition API and it worked just fine.

const date = ref('');
const email = ref('');

<input v-model="email" type="email" required />
<input v-model="date" type="date" required />

Also, I retried it in the options API and it also worked just fine lol. I am not sure what happened a year ago but ill keep the answer up!

OLD ANSWER:

If anyone is having this issue I was able to solve it, not sure if this is the best way but it works with no issues.

Template:

<input
  type="date"
  :value="new Date().toISOString().substr(0, 10)"
  class="form-control"
  id="date"
  @input="HandleDate($event.target.value)"
  required
/>

Vue:

data() {
  return {
    Date: '',
  };
},
methods: {
 HandleDate(DateInput) {
   this.Date = DateInput;
 },
}
👤Puwya

0👍

You can defer the update of the model to the change event, rather than the default input with the .lazy modifier:

<input type="date" v-model.lazy="Date" id="myDate" required />

Link to the documentation: https://vuejs.org/guide/essentials/forms.html#lazy

👤cpastore84

Leave a comment