I have been looking around for a solution and I can't seem to figure this out but it's very simple. So if anyone knows a fix if there is one let me know.

I want to v-model a input type date tag, so here is an example

HTML:

<input type="email" v-model="Email" id="email" required />
<input type="date" v-model="Date" id="myDate" required />

VUE:

data() {
  return {
    Email: '',
    Date: '',
  };
}

Now, this actually works just fine but I get a warning before I input the date.

ex. every character I enter in the email input before entering it in the date input I get this in the console

The specified value "function Date() { [native code] }" does not conform to the required format, "yyyy-MM-dd".

And I get this warning for every single character I enter

But again it works just if anyone know how to fix this warning

I have been looking around for a solution and I can't seem to figure this out but it's very simple. So if anyone knows a fix if there is one let me know.

I want to v-model a input type date tag, so here is an example

HTML:

<input type="email" v-model="Email" id="email" required />
<input type="date" v-model="Date" id="myDate" required />

VUE:

data() {
  return {
    Email: '',
    Date: '',
  };
}

Now, this actually works just fine but I get a warning before I input the date.

ex. every character I enter in the email input before entering it in the date input I get this in the console

The specified value "function Date() { [native code] }" does not conform to the required format, "yyyy-MM-dd".

And I get this warning for every single character I enter

But again it works just if anyone know how to fix this warning

• javascript
• html
• vue.js

• To add to this I am ok with the format yyyy-MM-dd its the why am I getting this warning I am after – Devlos Commented Sep 2, 2022 at 0:13
• I am not able to reproduce this issue. Here I just created a fiddle : jsfiddle/5r6L10gb . can you please have a look and help me in reproduce the issue. So that it can help me to find the root cause. – Rohìt Jíndal Commented Sep 2, 2022 at 4:58
• @RohìtJíndal yes it is a weird one I did e up with a solution for it, but I checked out the fiddle and that is super odd that its not happening there – Devlos Commented Sep 4, 2022 at 18:11

2 Answers 2

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 position 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;
 },
}

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/guide/essentials/forms.html#lazy