DEV Community

Olufemi Oyedepo
Olufemi Oyedepo

Posted on

Datetime Filter in Vue 3 using Moment.js

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.

  1. Install moment js from npm npm install moment --save
  2. 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>
Enter fullscreen mode Exit fullscreen mode

So that's it 😉. Please feel free to change the format to suit your use case.
Suggestions/comments are welcome. Thanks 🙏 🙏 🙏

Discussion (3)

Collapse
allanneves profile image
Allan Neves • Edited on

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.

Collapse
blazejplis profile image
Blazej Plis

Thank you for that!

Collapse
olufemi_oyedepo profile image
Olufemi Oyedepo Author

You're most welcome 😎