Lzh on GitHub

useDateFormatter

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

有关 DateFormatter 的更多信息，请参阅 此处。

用法

<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>

// 提供语言环境
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>

演示：

<script setup lang="ts">
import { useDateFormatter } from '@/shared/useDateFormatter'
import { today, getLocalTimeZone, parseDateTime } from '@internationalized/date'
import { ref } from 'vue'

// 当前日期（支持时区）
const now = today(getLocalTimeZone()).toDate(getLocalTimeZone())

// 实例化格式化器，默认使用 'en-US'
const formatter = useDateFormatter('en-US')

// 切换语言
function switchLocale() {
  const next = formatter.getLocale() === 'en-US' ? 'zh-CN' : 'en-US'
  formatter.setLocale(next)
}

// 示例日期对象（含时间）
const dateWithTime = parseDateTime('2025-07-31T14:45:00')
</script>

<template>
  <div style="padding: 1rem; font-family: sans-serif;">
    <h2>📅 日期格式化演示</h2>
    <button @click="switchLocale" style="margin-bottom: 1rem;">
      切换语言（当前：{{ formatter.getLocale() }})
    </button>

    <div>
      <p><strong>🗓 自定义格式:</strong> {{ formatter.custom(now, { dateStyle: 'full' }) }}</p>
      <p><strong>🔘 选中日期:</strong> {{ formatter.selectedDate(dateWithTime) }}</p>
      <p><strong>📆 月和年:</strong> {{ formatter.fullMonthAndYear(now) }}</p>
      <p><strong>📅 月:</strong> {{ formatter.fullMonth(now) }}</p>
      <p><strong>🕰 年:</strong> {{ formatter.fullYear(now) }}</p>
      <p><strong>📍 星期几:</strong> {{ formatter.dayOfWeek(now, 'long') }}</p>
      <p><strong>⏰ AM/PM:</strong> {{ formatter.dayPeriod(dateWithTime.toDate(getLocalTimeZone())) }}</p>
      <p><strong>🔍 年份部分:</strong> {{ formatter.part(dateWithTime, 'year') }}</p>
      <p><strong>📋 月份列表:</strong></p>
      <ul>
        <li v-for="month in formatter.getMonths()" :key="month.value">
          {{ month.label }} ({{ month.value }})
        </li>
      </ul>
    </div>
  </div>
</template>

执行结果：

custom：Thursday, July 31, 2025
selectedDate：July 31, 2025 at 2:45:00 PM GMT+8
fullMonthAndYear：July 2025
dayOfWeek：Thursday
dayPeriod：PM
getMonths()：January, February, ..., December