Cara Menampilkan Tanggal dan Waktu di Vue.js

Tanggal dan waktu adalah komponen penting di dalam pembuatan aplikasi. Keduanya bisa digunakan untuk menandai kapan suatu event terjadi atau hal lain yang membutuhkannya. Lalu bagaimana cara menampilkan tanggal dan waktu di Vue.js?

Prasyarat Artikel

Artikel ini menggunakan dependency package VueUse untuk menampilkan tanggal dan waktu secara realtime. Adapun fungsi dari VueUse yang digunakan adalah sebagai berikut:

• useNow digunakan untuk mendapatkan tanggal dan waktu secara realtime (reactive)
• useDateFormat digunakan untuk memformat tanggal dan waktu.

Mendapatkan Tanggal & Waktu Secara Realtime

Berikut ini contoh penggunaan useNow untuk mendapatkan tanggal dan waktu di Vue.js secara realtime.

<template>
 <div v-text='now'/>
</template>

<script setup>
import { useNow } from '@vueuse/core'

const now = useNow()
</script>

Pada contoh di atas, browser akan menampilkan tanggal dan waktu saat diakses kurang lebih formatnya seperti di bawah ini:

Fri Mar 15 2024 06:43:19 GMT+0700 (Indochina Time)

Mengubah Format Tanggal dan Waktu

Selanjutnya, kita akan mengubah format tanggal dan waktu agar sesuai dengan yang umum berlaku di Indonesia yaitu: Hari, Tanggal Bulan Tahun. Caranya adalah sebagai berikut:

<template>
 <div v-text='now'/>
</template>

<script setup>
import { useNow, useDateFormat } from '@vueuse/core'

const now = useDateFormat(useNow(), "dddd, DD MMMM YYYY", {locales:'id-ID'})
</script>

Dari contoh di atas, akan dihasilkan tampilan di browser kurang lebih seperti berikut:

Jumat, 15 Maret 2024

Lalu bagaimana kalau mau menampilkan sekaligus waktunya? Cukup tambahkan HH:mm:ss setelah format tahun. Lihat contoh berikut:

const now = useDateFormat(useNow(), "dddd, DD MMMM YYYY HH:mm:ss", {locales:'id-ID'})

Kode di atas akan menghasilkan tanggal dan waktu kurang lebih seperti di bawah ini:

Jumat, 15 Maret 2024 06:51:27

Perhatikan bagian {locales:'id-ID'}. Parameter id-ID bisa diubah ke local lain yang tersedia agar mendapat format tanggal dan waktu sesuai yang diinginkan. Silahkan coba menggunakan Playground VueUse untuk bermain-main dengan kedua fungsi tersebut.

Format Tanggal dan Waktu yang Tersedia

Di bawah ini adalah dokumentasi lengkap format tanggal dan waktu yang tersedia untuk digunakan pada fungsi useDateFormat().