Vue 3 Date time Format in moment.js?

Viewed 10215

I am struggling to convert the date-time formate in Vue.js 3. Somehow moment.js not working in Vue 3 version as I see. can anyone help me?

Thanks

vue file

<template>
  <div>
    <p class="text-danger">
      {{ dateTime(category.created_at) }}
    </p>
  </div>
</template>

<script>
import moment from "moment";
export default {
  computed: {
    dateTime(value) {
      return moment(value).format("YYYY-MM-DD");
    },
  },
};
</script>

getting error

http://prntscr.com/10z3p80

2 Answers

Computed properties don't take arguments, but methods do. You probably either want this:

<template>
  <div>
    <p class="text-danger">
      {{ dateTime(category.created_at) }}
    </p>
  </div>
</template>
<script>
import moment from 'moment';

export default {
  mathods: {
    dateTime(value) {
      return moment(value).format('YYYY-MM-DD');
    },
  },
};
</script>

Or something like this:

<template>
  <div>
    <p class="text-danger">{{ formattedDate }}</p>
  </div>
</template>
<script>
import moment from 'moment';

export default {
  computed: {
    formattedDate {
      return moment(this.category.created_at).format('YYYY-MM-DD');
    },
  },
};
</script>

If you prefer the <script setup> way:

<template>
    <div class="">
        <div class=""> {{ moment(date).format("YYYY-MM-DD") }} </div>
    </div>
</template>

<script setup>
import moment from "moment";

let props = defineProps({
    date: String,
});
</script>
Related