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
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 {
methods: {
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>
Edit: Corrected spelling
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>
You can use filters as well.
<template>
<div>
<p class="text-danger">
{{ category.created_at | dateFormat }}
</p>
</div>
</template>
and
filters: {
dateFormat(date) {
return moment(date, "YYYY-MM-DD").format("YYYY-MM-DD");
}
}
Important to add format example "YYYY-MM-DD" to moment(date, "YYYY-MM-DD") without format in the first part it returns an Invalid Date in Safari and Firefox but works on Chrome.
