How to format date for display


I like the formatter, but I decided to just use moment directly which seems simpler and more straight-forward to me (I’m new to Vue, so I reserve the right to change my mind :slight_smile:).

I started with npm install --save moment.

Then, in my .vue file,

	The date was set {{moment(myDate).fromNow()}}
  import moment from 'moment'

  export default {
	data () {
	  return {
		myDate: null // Set to whatever

	methods: {


NOTE: This code isn’t tested (the date isn’t even actually set), but something very similar to it is working for me.


Just wanted to point out very minor syntax error in Linus’s first code block: it is missing the closing paren for his call to Vue.filter(…). Just in case someone is copy-pasting and confused about why it doesn’t work :slightly_smiling_face:

    import moment from 'moment'

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


Does it validate leap years ?


Moment? sure


What would you suggest using cleave js or moment ?


Thanks , you saved my time, i didn’t check that


Hi @borov,
first create folder call filters
inside filters create file date.js

copy-paste flowing code into date.js file

export default (value) => {
    const date = new Date(value)
    return date.toLocaleDateString(['en-US'], {month: 'short', day: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit'})  //if you want, you can change locale date string

Now main.js just import

import DateFilter from './filters/date' // Import date

Vue.filter('date', DateFilter ) // register filter globally

Now you can able to use any where:
{{ lead.created | date }}



You could just write a simple date format filter, provided the string you have can be parsed as a date by JavaScript.

filters: {
  date: function(str) {
    if (!str) { return '(n/a)'; }
    str = new Date(str);
    return str.getFullYear() + '-' + ((str.getMonth() < 9) ? '0' : '') + (str.getMonth() + 1) + '-' +
      ((str.getDate() < 10) ? '0' : '') + str.getDate();


Can we use the filter in v-model while binding to a text input?


yes, you could @rathnamvemula


No, you cannot.


Hi @LinusBorg, How can i format the date then? I am using Vuetify date picker to display the date. From API, I am receiving it as YYYY-MMM-DDTHH:MM:SS format, which says it is invalid date in Chrome. How can i format the date while initializing it in input filed?


You made some good points here.


Generally, you can use a computed property with a setter

<v-date-picker v-model="formattedDate">

export default {
  data: function () {
    return { date: '2018-MAY-09T12:00:00' }
  computed: {
    formattedDate: {
      get() { return /* transfor here */  },
      set(valueFromPicker) { = /* transform back here */ }


Can I use this filter to display a time as 00:00 instead of 00:00:00. When I change the filter I get

date.toLocaleDateString([‘en-US’], { hour: ‘2-digit’, minute: ‘2-digit’})

I get invalid date.


Through your question I have got my answer also.


Thanks this worked for me.Thanks for cleaning my UI and introducing me to filters.


Where to write this?
My vue file is:

  <template >
<datetime type="datetime" v-model="list.datetimeEmpty"></datetime>
<script type="text/javascript">
    export default{