useTemporalNow

类别

Time

导出大小

支持时区转换和日历系统的响应式 Temporal API。

🌐 Reactive Temporal API with timezone conversion and calendar system support.

使用现代的 Temporal API，而不是传统的 Date 对象，提供更好的时区处理、日历系统和日期/时间操作。

🌐 Uses the modern Temporal API instead of the legacy Date object, providing better timezone handling, calendar systems, and date/time operations.

示例

源代码在线运行

13/09/2026, 3:20:06 pm UTC

UTCgregoryPaused

Timezone

UTCNew YorkLondonTokyoSydney

Calendar System

GregorianIslamicHebrewChineseJapanese

World Clock

New York

13/09/2026, 11:20:06 am GMT-4

London

13/09/2026, 4:20:06 pm GMT+1

Tokyo

14/09/2026, 12:20:06 am GMT+9

Sydney

14/09/2026, 1:20:06 am AEST

Duration Operations

Format Examples

Short: 13/9/26

Long: 13 September 2026

Time: 3:20:06 pm

Components

Date: 2026-09-13[u-ca=gregory]

Time: 15:20:06.663

DateTime: 2026-09-13T15:20:06.663[u-ca=gregory]

要求

🌐 Requirements

这个函数依赖 Temporal API。它不包含或依赖任何 Temporal 实现——默认情况下它会读取全局的 Temporal 对象，但你也可以通过 temporal 选项传入你自己的实现。

🌐 This function relies on the Temporal API. It does not bundle or depend on any Temporal implementation — by default it reads the global Temporal object, but you can also pass your own implementation via the temporal option.

• 现代的 JS 引擎（最近的 Node.js、Deno 和浏览器）已经原生支持 Temporal，或者很快就会支持。

• 对于没有原生支持的环境，请自行安装一个 polyfill，例如 temporal-polyfill ：

  npm i temporal-polyfill

  并且可以在这个函数被使用之前，把它作为全局变量加载一次（例如，在你的应用入口点）：

  import 'temporal-polyfill/global'

  如果你需要超过 iso8601/gregory 的日历系统（例如下面示例中使用的 islamic、hebrew、chinese、japanese），请改用 /full/ 入口：

  import 'temporal-polyfill/full/global'

  ...或者通过 temporal 选项显式传递，而不是去修改全局作用域：

  import { useTemporalNow } from '@vueuse/core'
  import { Temporal } from 'temporal-polyfill'
  
  const temporal = useTemporalNow({ temporal: Temporal })

  @js-temporal/polyfill 是另一个常见的替代方案。它本身不会安装全局 Temporal 对象，所以使用 temporal 选项是自然的方式。它的类型声明是独立于 TypeScript 自身的全局 Temporal 类型编写的（不像 temporal-polyfill，它的类型来源相同），因此在编译时需要类型转换来满足 temporal 选项——运行时对象是符合规范的，并且可以良好互操作:

  import { Temporal } from '@js-temporal/polyfill'
  import { useTemporalNow } from '@vueuse/core'
  
  const temporal = useTemporalNow({ temporal: Temporal as unknown as typeof globalThis.Temporal })

如果找不到 Temporal 的实现（既没有通过 temporal 选项传入，也没有全局可用），调用 useTemporalNow 就会报错。

🌐 If no Temporal implementation can be found (neither passed via the temporal option nor available globally), calling useTemporalNow will throw an error.

用法

🌐 Usage

基本用法

🌐 Basic Usage

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

const { now, timezone, calendar, format } = useTemporalNow()

// Display current time
console.log(format()) // "12/25/2023, 3:30:00 PM"
</script>

<template>
  <div>
    <p>Current time: {{ format() }}</p>
    <p>Timezone: {{ timezone }}</p>
    <p>Calendar: {{ calendar }}</p>
  </div>
</template>

时区转换

🌐 Timezone Conversion

import { useTemporalNow } from '@vueuse/core'

const temporal = useTemporalNow({ timezone: 'America/New_York' })

// Convert to different timezones
const tokyoTime = temporal.toTimezone('Asia/Tokyo')
const londonTime = temporal.toTimezone('Europe/London')
const utcTime = temporal.toTimezone('UTC')

// Change timezone reactively
temporal.timezone.value = 'Europe/Berlin'

日历系统

🌐 Calendar Systems

import { useTemporalNow } from '@vueuse/core'

const temporal = useTemporalNow({ calendar: 'gregory' })

// Convert to different calendar systems
const islamicDate = temporal.toCalendar('islamic-umalqura')
const hebrewDate = temporal.toCalendar('hebrew')
const chineseDate = temporal.toCalendar('chinese')

// Change calendar reactively
temporal.calendar.value = 'islamic-umalqura'

日期/时间操作

🌐 Date/Time Manipulation

import { useTemporalNow } from '@vueuse/core'

const { now, add, subtract, compare } = useTemporalNow()

// Add/subtract durations
const nextWeek = add('P7D') // Add 7 days
const lastMonth = subtract('P1M') // Subtract 1 month
const inTwoHours = add('PT2H') // Add 2 hours

// Compare dates
const futureDate = add('P1Y') // Add 1 year
const comparison = compare(futureDate) // -1 (now is before futureDate)

格式选项

🌐 Format Options

import { useTemporalNow } from '@vueuse/core'

const { format } = useTemporalNow()

// Different formatting options
const short = format({ dateStyle: 'short' }) // "12/25/23"
const long = format({ dateStyle: 'long' }) // "December 25, 2023"
const time = format({ timeStyle: 'medium' }) // "3:30:00 PM"
const custom = format({
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric'
}) // "Monday, December 25, 2023"

控制自动更新

🌐 Control Auto-Update

默认情况下，useTemporalNow 会在每次 requestAnimationFrame 时更新。传入自定义的 scheduler 来控制更新的驱动方式——例如，可以按固定间隔触发，或者开始时暂停：

🌐 By default useTemporalNow updates on every requestAnimationFrame. Pass a custom scheduler to control how updates are driven — for example, tick on a fixed interval, or start paused:

import { useTemporalNow } from '@vueuse/core'
import { useIntervalFn } from '@vueuse/shared'

const { pause, resume, isActive } = useTemporalNow({
  // Update every 500ms instead of on every animation frame,
  // and don't start immediately.
  scheduler: cb => useIntervalFn(cb, 500, { immediate: false }),
})

// Manually control updates
resume() // Start auto-update
pause() // Stop auto-update

console.log(isActive.value) // true/false

例子

🌐 Examples

世界时钟

🌐 World Clock

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

const timezones = [
  { name: 'New York', tz: 'America/New_York' },
  { name: 'London', tz: 'Europe/London' },
  { name: 'Tokyo', tz: 'Asia/Tokyo' },
  { name: 'Sydney', tz: 'Australia/Sydney' }
]

const { now } = useTemporalNow()

const worldTimes = computed(() =>
  timezones.map(({ name, tz }) => ({
    name,
    time: now.value.withTimeZone(tz).toLocaleString()
  }))
)
</script>

<template>
  <div>
    <h2>World Clock</h2>
    <div v-for="{ name, time } in worldTimes" :key="name">
      <strong>{{ name }}:</strong> {{ time }}
    </div>
  </div>
</template>

日历系统转换器

🌐 Calendar System Converter

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

const { now, calendar } = useTemporalNow()

const calendars = ['gregory', 'islamic-umalqura', 'hebrew', 'chinese', 'japanese']

const convertedDates = computed(() =>
  calendars.map(cal => ({
    name: cal,
    date: now.value.withCalendar(cal).toPlainDate().toString()
  }))
)
</script>

<template>
  <div>
    <h2>Calendar Systems</h2>
    <select v-model="calendar">
      <option v-for="cal in calendars" :key="cal" :value="cal">
        {{ cal }}
      </option>
    </select>

    <div v-for="{ name, date } in convertedDates" :key="name">
      <strong>{{ name }}:</strong> {{ date }}
    </div>
  </div>
</template>