How to deal with time format in vue3

There are several ways to handle time formats in Vue 3:

1. Use the past operator |
The new past operator in Vue 3 can simply format the time. For example:

<p>{
   
   { 2021-10-10 | date }}</p>
<p>{
   
   { 2021-10-10 | time }}</p> 
<p>{
   
   { 2021-10-10 | datetime }}</p>

rendering:

10/10/2021 
10:00:00 
10/10/2021 10:00:00

2. Use DateTimeFormat
Vue 3 supports directly using Intl.DateTimeFormat to format time. For example:

const df = new Intl.DateTimeFormat('en', { 
  year: 'numeric', 
  month: 'long', 
  day: 'numeric'
})

new Vue({
  template: '<p>{
   
   { date }}</p>',
  computed: {
    date() {
     return df.format(new Date(2021, 9, 10)) 
    }
  }  
}) 

This renders:

October 10, 2021

3. Use third-party libraries
You can use third-party libraries such as date-fns to format the time. For example:

import { format } from 'date-fns'

new Vue({
  template: '<p>{
   
   { date }}</p>',
  computed: {
    date() {
      return format(new Date(2021, 9, 10), 'MMM dd, yyyy')
    }
  }
})

This will also render: October 10, 2021 So, the main way of dealing with time formatting in Vue 3 is: 1. Use the built-in | past operator 2. Call Intl.DateTimeFormat directly 3. Use third-party
libraries
such as date- Compared with Vue 2, fns simplifies time formatting, has built-in support for richer formatting functions, and better supports modern environment APIs such as Intl.