How to format date for display

#21

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,

<template>
<div>
	The date was set {{moment(myDate).fromNow()}}
</div>
</template>
<script>
  import moment from 'moment'

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

	methods: {
	  moment
	}
  }

</script>

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

#22

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')
      }
    })
#23

Does it validate leap years ?

#24

Moment? sure

#25

What would you suggest using cleave js or moment ?

#26

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

#27

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 }}

Thanks

#28

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();
  }
}
#29

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

#30

yes, you could @rathnamvemula

#31

No, you cannot.

#32

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?

#33

You made some good points here.

#34

Generally, you can use a computed property with a setter

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

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

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.

#36

Through your question I have got my answer also.

#37

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

#38

Where to write this?
My vue file is:

  <template >
<datetime type="datetime" v-model="list.datetimeEmpty"></datetime>
</template>
<script type="text/javascript">
    export default{
        props:['openmodal'],
        data(){}
}
</script>