Time

Shows a moment in the current language, optionally relative to now.

Published Mar 14, 2026, 1:30 AM

Last edited 12 minutes ago

<script setup lang="ts">
  import { Stack, Text, Time } from '@hina-ui/vue'

  const published = new Date('2026-03-14T09:30:00+08:00')
  const edited = new Date(Date.now() - 12 * 60 * 1000)
</script>

<template>
  <Stack class="max-w-sm">
    <Text>
      Published
      <Time :value="published" />
    </Text>
    <Text tone="muted">
      Last edited
      <Time :value="edited" format="relative" />
    </Text>
  </Stack>
</template>

vue

Usage

import { Time } from '@hina-ui/vue'

value accepts a time string, a timestamp or a Date. The component renders a native time element whose datetime attribute holds the ISO form, while the visible text is set in the current language.

Mar 14, 2026, 1:30 AM

<script setup lang="ts">
  import { Time } from '@hina-ui/vue'
</script>

<template>
  <Time value="2026-03-14T09:30:00+08:00" />
</template>

vue

Examples

Formats

Four of them. datetime shows the date and the time of day, date and time show one each, and relative shows the distance from now.

datetime: Mar 14, 2026, 1:30 AM
date: Mar 14, 2026
time: 1:30 AM
relative: 7 months ago

<script setup lang="ts">
  import { DescriptionDetails, DescriptionList, DescriptionTerm, Time } from '@hina-ui/vue'

  const value = '2026-03-14T09:30:00+08:00'
</script>

<template>
  <DescriptionList class="grid max-w-sm grid-cols-[6rem_1fr] gap-y-2 [&>dd]:m-0! [&>dt]:m-0!">
    <DescriptionTerm>datetime</DescriptionTerm>
    <DescriptionDetails><Time :value="value" /></DescriptionDetails>
    <DescriptionTerm>date</DescriptionTerm>
    <DescriptionDetails><Time :value="value" format="date" /></DescriptionDetails>
    <DescriptionTerm>time</DescriptionTerm>
    <DescriptionDetails><Time :value="value" format="time" /></DescriptionDetails>
    <DescriptionTerm>relative</DescriptionTerm>
    <DescriptionDetails><Time :value="value" format="relative" /></DescriptionDetails>
  </DescriptionList>
</template>

vue

Relative time

Within 45 seconds it reads as “just now”; anything earlier or later steps through seconds, minutes, hours, days, weeks, months and years. The wording follows the natural phrasing of the current language.

It refreshes every 30 seconds while the page is open, with no manual update. Inside a TooltipProvider, hovering shows the full date and time in a Tooltip; set tooltip to false to turn it off.

10 seconds ago: Just now

3 minutes ago: 3 minutes ago

5 hours ago: 5 hours ago

in 2 days: in 2 days

<script setup lang="ts">
  import { Stack, Text, Time } from '@hina-ui/vue'

  const now = Date.now()
  const items = [
    { label: '10 seconds ago', value: now - 10 * 1000 },
    { label: '3 minutes ago', value: now - 3 * 60 * 1000 },
    { label: '5 hours ago', value: now - 5 * 60 * 60 * 1000 },
    { label: 'in 2 days', value: now + 2 * 24 * 60 * 60 * 1000 },
  ]
</script>

<template>
  <Stack class="max-w-sm" gap="xs">
    <Text v-for="item in items" :key="item.label" size="sm">
      {{ item.label }}:
      <Time :value="item.value" format="relative" />
    </Text>
  </Stack>
</template>

vue

Following the language

The order of the date, the spelling of the month and the phrasing of relative time all follow the language provided through provideUiLocale.

Site language: Mar 14, 2026, 1:30 AM

English: Mar 14, 2026, 1:30 AM

<script setup lang="ts">
  import { Stack, Text, Time, enUS, provideUiLocale } from '@hina-ui/vue'
  import { defineComponent, h } from 'vue'

  const value = '2026-03-14T09:30:00+08:00'

  const English = defineComponent({
    setup(_, { slots }) {
      provideUiLocale(enUS)
      return () => h('span', slots.default?.())
    },
  })
</script>

<template>
  <Stack class="max-w-sm">
    <Text>
      Site language:
      <Time :value="value" />
    </Text>
    <Text>
      English:
      <English><Time :value="value" /></English>
    </Text>
  </Stack>
</template>

vue

Values that cannot be parsed

When value is empty or cannot be parsed, the component shows “unknown time” and renders a span instead, so no incorrect datetime is emitted. A warning is printed in development.

Value is null: Unknown time

Cannot be parsed: Unknown time

<script setup lang="ts">
  import { Stack, Text, Time } from '@hina-ui/vue'
</script>

<template>
  <Stack class="max-w-sm">
    <Text>
      Value is null:
      <Time :value="null" />
    </Text>
    <Text>
      Cannot be parsed:
      <Time value="yesterday afternoon" />
    </Text>
  </Stack>
</template>

vue

API

Props

Prop	Type	Default	Description
`value`	`string \| number \| Date \| null`	—	The moment to show
`format`	`'datetime' \| 'date' \| 'time' \| 'relative'`	`'datetime'`	Display format
`tooltip`	`boolean`	`true`	Whether relative time shows the full moment in a Tooltip
`class`	`string`	—	Classes appended to the root