From b656c6fda27e8687c3a0859cba6330aedb9a85d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= Date: Sat, 26 Nov 2022 16:34:24 +0800 Subject: [PATCH] refactor(account): improve joined time format --- components/account/AccountHeader.vue | 9 +++++---- composables/time.ts | 4 ++-- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue index c291f2de..78281b58 100644 --- a/components/account/AccountHeader.vue +++ b/components/account/AccountHeader.vue @@ -5,10 +5,11 @@ const { account } = defineProps<{ account: Account }>() -const createdAt = $computed(() => { - const date = new Date(account.createdAt) - return new Intl.DateTimeFormat('en-US', { month: 'long', day: 'numeric', year: 'numeric' }).format(date) -}) +const createdAt = $(useFormattedDateTime(() => account.createdAt, { + month: 'long', + day: 'numeric', + year: 'numeric', +})) const fields = $computed(() => { return [ diff --git a/composables/time.ts b/composables/time.ts index 4e51597a..f99d022a 100644 --- a/composables/time.ts +++ b/composables/time.ts @@ -1,7 +1,7 @@ -import type { MaybeRef, UseTimeAgoOptions } from '@vueuse/core' +import type { MaybeComputedRef, UseTimeAgoOptions } from '@vueuse/core' export const useFormattedDateTime = ( - value: MaybeRef, + value: MaybeComputedRef, options: Intl.DateTimeFormatOptions = { dateStyle: 'long', timeStyle: 'medium' }, ) => { const formatter = Intl.DateTimeFormat(undefined, options)