Reka UI logoReka
backdrop
实用工具

useDateFormatter

围绕 `DateFormatter` 创建了一个包装器,它是 Intl.DateTimeFormat API 的改进版本,供各种日期构建器内部使用,以便以一致的方式轻松格式化日期。

有关 DateFormatter 的更多信息,请点击此处

用法

vue
<script setup lang="ts">
import type { DateValue } from '@internationalized/date'
import type { Ref } from 'vue'
import { CalendarDate, getLocalTimeZone } from '@internationalized/date'
import { toDate, useDateFormatter } from 'reka-ui'
import { ref } from '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>