Datetime Filter in Vue 3 using Moment.js
It turns out that Filters have been removed 😏 in Vue 3 Official docs link.
So that practically makes it a bit hard to format date/datetime in Vue 3. According to the official docs, the use of global filters is now encouraged but in my opinion, I'm not too sure the use of global filters would solve the problem at hand.
So, I looked around but couldn't find much examples but I was able to eventually come up with something with the help of this famous library [Moment.js] 🕗 (https://momentjs.com/)
Let's dive straight into it.
- Install moment js from npm
npm install moment --save
- In your component
import moment from 'moment'
export default {
...
created: function () {
this.moment = moment;
},
setup() {
let todaysDate = new Date();
}
...
}
<div>
{{ moment(todaysDate).format("ddd MMM DD, YYYY [at] HH:mm a") }}
<!-- As of the time of writing, this gives ==> Thu May 13, 2021 at 19:42 pm -->
</div>
So that's it 😉. Please feel free to change the format to suit your use case.
Suggestions/comments are welcome. Thanks 🙏 🙏 🙏
Top comments (3)
Thank you! If you don't mind the question, why do we need to assign the moment to itself upon creation in the life cycle? Obviously, we cannot use it as a component but I don't understand the black magic behind it.
Thank you for that!
You're most welcome 😎