CODEWITHSUNDEEP
vuejs2
Sumomo
Sumomo

Reputation: 623

How do I use <input type="date"> and then Date.prototype.getFullYear() in VueJS?

I simply want to ask the user to input a date and then take actions based on the day/month/year. I don't want to install more dependencies either.

I have:

<input type="date" v-model="dateOfBirth" />

and:

const vm = new Vue({
  el: '#app',
  data() {
    return {
      dateOfBirth: null,
    };
  },
  ...

When I make a selection I get:

typeof vm.dateOfBirth === object

and the result looks like:

2018-05-11

But how can I now get the day/month/year, where should the .getFullYear() go? It is not working how I expected, I have tried everything online I could find, please help!

Upvotes: 1

Views: 1125

Answers (1)

Bert
Bert

Reputation: 82439

The value of a date input is a string, so in order to call getFullYear you need to convert it into a date.

In Vue, you might do that with a computed property. Here is an example.

console.clear()

new Vue({
  el: "#app",
  data:{
    dateOfBirth: new Date()
  },
  computed:{
    year(){
      return new Date(this.dateOfBirth).getFullYear()
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
  <input type="date" v-model="dateOfBirth">
  <hr>
  Year: {{year}}
</div>

This code doesn't handle all the edge cases, but should give you the idea.

Upvotes: 1

Related Questions