Convert date format in Javascript using VueJS

Convert date format in Javascript using VueJS

Use moment

First we need to install moment npm package that will allow to change date format.

npm install moment

Now you can create a global function to set the format you want, to do so you must open the file resources/js/app.js and put the following code:

import moment from moment;

Vue.filter(formatDate, function(value) {
    if (value) {
        return moment(String(value)).format(MM/DD/YYYY hh:mm)
    }
});

Now in all your js components you can apply the format as follows:

{{ response.create_at | formatDate }}

You can do this easily:

  import moment from moment

  methods: { 
      format_date(value){
         if (value) {
           return moment(String(value)).format(YYYYMMDD)
          }
      },
   },

Then:

format_date(date)

Convert date format in Javascript using VueJS

Another good option is to use moment.js lib to format the date, you should install it first in your project through npm npm i --save moment (or see more options on official website) and then you only would have to import it in your component and change the date to the desired format:

import moment from moment
const formattedDate = moment(19 Oct 2017).format(YYYYMMDD)
console.log(formattedDate) //20171019

Leave a Reply

Your email address will not be published.