How to extract only year from date in vue js html and print only that year?

Question

{"status":true,"data":[{"_id":"5addb7cbcd79850454bceb9f","no":12123,"orDate":"2010-01-01T00:00:00.000Z","oldness":"5"},{"_id":"5ae02a26de15e934ac70ee8f","no":11223,"orDate":"2004-01-01T00:00:00.000Z","oldness":"5"},{"_id":"5ae02a26de257934ac70ee8f","no":12311,"orDate":"1994-01-01T00:00:00.000Z","oldness":"5"}]}

This is my json response. I need to print only the year from orDate in vue js html.

How can I able to achieve the same.

My html code is

<div id="app">
<div v-for="aln in data">
{{aln._id}}
{{aln.no}}
{{aln.orDate}}
</div>
</div>

I orDate, I need to print only year from the date. If date is this 2010-01-01T00:00:00.000Z, I need to print 2010 only

My vue js code is

app = new Vue({
el: "#iapp",
  data: {
    data:[],
  },
mounted: function() {
 var vm = this;
         $.ajax({
            url: "http://localhost:4000/get/l/",
            method: "GET",
            dataType: "JSON",
            success: function(e) {
            if (e.status == 1) { 
             vm.data = e.data;
             console.log(vm.data);
            }           
            },
        });
},
})

Answer 1

I think you have 2 choice:

1. "2010-01-01T00:00:00.000Z".slice(0,4)
2. new Date("2010-01-01T00:00:00.000Z").getFullYear()

Answer 2

BEWARE THE TIMEZONE. The accepted answer falls into the trap! Set your device timezone to anything minus (west of london) and you'll get 2009.

By far the safest way to recover a year from an ISO date string is .substring(0,3). If you want to rehydrate your date into a date object, to format it, compare it or do arithmetic, then you need to be super carefull to avoid getting a timezone when serializing/displaying.

To do this safely, use getUTCFullYear()

Answer 3

Since you've a well-formed date string, you can initialize a date object from the string and call getFullYear() on it:

var date = new Date("2010-01-01T00:00:00.000Z");
console.log(date.getUTCFullYear());

You can try creating a year key like this in the collection, and use the key in the template:

success: function(e) {
  if (e.status == 1) { 
    vm.data = e.data;
    vm.data.forEach(item => {
      var date = new Date(item.orDate);
      item.year = date.getUTCFullYear();
    });
    ...
}

In your template, instead of orDate, show year instead.

{{aln.year}}

---

Edit 1:

As @bbsimonbb pointed out the problem with getFullYear(), I've updated my code to use getUTCFullYear() instead.

Answer 4

you can simply give like this.

<div id="app">
<div v-for="aln in data">
{{aln._id}}
{{aln.no}}
{{new Date(aln.orDate).getFullYear()}}
</div>
</div>