Change format of date in vuetify's data-table

Question

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

Does this answer your question? [How to format Vuetify data table date column?](https://stackoverflow.com/questions/57944894/how-to-format-vuetify-data-table-date-column) — Boussadjra Brahim, Apr 19 '20 at 12:20

score 9 · Accepted Answer · answered Oct 07 '19 at 02:34

9

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

answered Oct 07 '19 at 02:34

ittus

21,730
5
57
57

is it possible to add some kind of generic template for more dates? Let's say that I have multiple date properties in the object. I want to achieve something like `` – Vitomir Jun 29 '23 at 09:53

Change format of date in vuetify's data-table

1 Answers1