Change format of date in vuetify’s data-table

Total
3
Shares

Is there a way to use momentjs to change the date format in data-table in VueJS?

Because right now I can’t use it like this value: moment(“STRT_D”).format(“MMMM DD YYYY”)

import moment from "moment";
export default {
  data() {
    return {
      singleSelect: false,
      selected: [],
      results: [],
      headers: [
        {
          text: "Start Date",
          sortable: false,
          value: "STRT_D"
        },
        {
          text: "Expiry Date",
          sortable: false,
          value: "LAST_D"
        },
        {
          text: "Print Date",
          sortable: false,
          value: "PrintDate"
        }
      ]
    };
  },

Here’s my table as of now
table


Solution

You can custom row template

<template>
  <v-data-table
    :headers="headers"
    :items="results"
    class="elevation-1"
  >
    <template v-slot:item.STRT_D="{ item }">
      {{ formatDate(item.STRT_D) }}
    </template>
  </v-data-table>
</template>

Here I format date with a methods, you can create a Vue filter instead

methods: {
  formatDate(value) {
      return moment(value).format("MMMM DD YYYY")
  }
}
Leave a Reply

Your email address will not be published. Required fields are marked *