How to Change Date Format Using Moment Js in Vue Js

In this tutorial, we will see how we can use moment js in our vue application. Using moment js we can Parse, validate, manipulate, and display dates and times in JavaScript. 

You will know that moment js is much popular to change date time. Moment js will make a simpler way to change the date format, change timezone, etc in our javascript file. 

Here, we can easily display date with our formate. In this example we will convert date format yyyy-mm-dd hh:mm:ss to MM/DD/YYYY hh:mm.

Step 1 : Install moment js

First we need to install moment npm package in our vue app that will allow us to change date formate in vue.js.

npm install moment

Step 2: Use moment main.js file

In this step we need to use moment package in main.js file of vue js app.

src/main.js

import Vue from 'vue'
import App from './App.vue'
import moment from 'moment'
  
Vue.config.productionTip = false
Vue.filter('formatDate', function(value) {
  if (value) {
    return moment(String(value)).format('MM/DD/YYYY hh:mm')
  }
});
  
new Vue({
  render: h => h(App),
}).$mount('#app')

Step 3 : Create Test Component

Here, we will create Test.vue component with following code.

src/components/Test.vue

Now you have to run vue app by using the following command:

npm run serve

Now you can check it. Hope it can help you.