In the examples below, we write it in thetemplate. It’s up to you to wrap it in functions to making it reusable.

<template>
{{ your js here }}
</template>

Get current full date

get full date time with timezone

new Date()

Get current time or timestampnumber

Date.now() 

new Date().getTime()

Get current date in a dd/mm/yyyy

new Date().toLocaleDateString()

Get current date in a dd/mm/yyyy hh:mm:ss

new Date().toLocaleString()

Get current time in 12 hour format

new Date().toLocaleTimeString('en-US', { hour12: true })

these are some common time formats that can be used, it’s basically JavaScript, check outthispage for more.

Reactive timestamp

To get a reactive timestamp, you can useuseTimestampfrom vueuse. Check out thedocsto learn more about the usage.

1658512724307
7/22/2022, 5:58:44 PM ✨ magic

<template>
{{ timestamp }} <br>
{{ formattedTimestamp }}
</template>

<script setup lang='ts'>
import { useTimestamp } from '@vueuse/core'

const timestamp = useTimestamp() 

// do any other logic with computed property
const formattedTimestamp = computed(() => {
  const date = new Date(timestamp.value)
  return date.toLocaleString()
})

</script>

Happy coding!💖