Change Date Format Using Moment Js in Vue App

In this tutorial we will ses 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 simpler way to change 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

 

Read also :  How to Get Current Date Time in Vue Js?

 

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

npm run serve

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