Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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 />
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
                To add to this I am ok with the format yyyy-MM-dd its the why am I getting this warning I am after
– Puwya
                Sep 2, 2022 at 0:13
                I am not able to reproduce this issue. Here I just created a fiddle : jsfiddle.net/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
                Sep 2, 2022 at 4:58
                @RohìtJíndal yes it is a weird one I did come up with a solution for it, but I checked out the fiddle and that is super odd that its not happening there
– Puwya
                Sep 4, 2022 at 18:11
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
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.org/guide/essentials/forms.html#lazy
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.