useDateFormatter

さまざまな日付ビルダーで日付を簡単に一貫した方法でフォーマットするために内部的に使用される、Intl.DateTimeFormat API の改善版である `DateFormatter` をラップします。

DateFormatter に関する詳細 はこちら。

使用

<script setup lang="ts">
import { type Ref, ref } from 'vue'
import { CalendarDate, getLocalTimeZone, type DateValue } from '@internationalized/date'
import { toDate, useDateFormatter } from 'radix-vue'

const value = ref(new CalendarDate(1995, 8, 18)) as Ref<DateValue>
// provide the locale
const formatter = useDateFormatter('en')
</script>

<template>
  <span>
    <!-- output the month in short format. e.g.: Jan, Feb, etc. -->
    {{ formatter.custom(value.toDate(getLocalTimeZone()), {
      month: 'short',
    }) }}
  </span>
</template>