Question

43

How to format Vuetify data table date column?

rated 0 times [ 45] [ 2] / answers: 1 / hits: 44011 / 5 Years ago, sun, september 15, 2019, 12:00:00

I have a simple data table using Vuetify data table. One of the column is a createdOn (date time), I want to format it. How can I do it ?

This is what i get now:

This

<template>

   <v-layout>

      <v-data-table :headers=headers :items=logs>

      </v-data-table>

   <v-layout>

</template>

<script>

      headers: [

        { text: Time, value: createdOn, dataType: Date },

        { text: Event Source, value: eventSourceName },

        { text: Event Details, value: eventDetails },

        { text: User, value: user }

      ],

      items: [],

</script>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

alyssiat

Add To Favorites

Follow

Total Points: 608

Total Questions: 102

Total Answers: 101

Location: Japan

Member since Sat, Jun 6, 2020

4 Years ago

answered 5 Years ago halleyb · Accepted Answer

You should use a custom row cell :

<v-data-table :headers="headers" :items="logs">

  <template v-slot:item.createdOn="{ item }">

    <span>{{ new Date(item.createdOn).toLocaleString() }}</span>

  </template>

</v-data-table>