wt-datetime-text.vue

Відображає дату/час у вигляді відформатованого тексту. Форматування виконується через date-fns з урахуванням часової зони користувача.

Specs

Props

Name	Required	Types	Default	Description	Example	Deprecated
datetime	✅	union	-	Date/time value to display. Accepts a date string, Unix timestamp (ms), or Date object.
mode		FormatDateMode	FormatDateMode.DATETIME	Display format mode.
timezone		string	-	IANA timezone identifier (e.g. 'Europe/Kyiv'). Falls back to the user's saved timezone or the browser timezone.

Example

21.10.2026, 14:27:32

Code

<script setup>
const now = new Date();
</script>

<template>
  <wt-datetime-text :datetime="now" />
</template>

Example Modes

FormatDateMode.DATE21.10.2026

FormatDateMode.TIME14:27

FormatDateMode.TIME_SEC14:27:32

FormatDateMode.DATETIME (default)21.10.2026, 14:27:32

FormatDateMode.DATETIME_SHORT21.10.2026, 14:27

Code

<script setup>
import { FormatDateMode } from '__lib__/enums';

const now = new Date();

const modes = [
	{
		mode: FormatDateMode.DATE,
		label: 'FormatDateMode.DATE',
	},
	{
		mode: FormatDateMode.TIME,
		label: 'FormatDateMode.TIME',
	},
	{
		mode: FormatDateMode.TIME_SEC,
		label: 'FormatDateMode.TIME_SEC',
	},
	{
		mode: FormatDateMode.DATETIME,
		label: 'FormatDateMode.DATETIME (default)',
	},
	{
		mode: FormatDateMode.DATETIME_SHORT,
		label: 'FormatDateMode.DATETIME_SHORT',
	},
];
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 8px">
    <div
      v-for="{ mode, label } of modes"
      :key="mode"
      style="display: flex; gap: 16px; align-items: center"
    >
      <code style="min-width: 140px">{{ label }}</code>
      <wt-datetime-text :datetime="now" :mode="mode" />
    </div>
  </div>
</template>

Example Timezones

Europe/Kyiv21.10.2026, 17:27:32

America/New_York21.10.2026, 10:27:32

Asia/Tokyo21.10.2026, 23:27:32

Code

<script setup>
const now = new Date();

const timezones = [
	'Europe/Kyiv',
	'America/New_York',
	'Asia/Tokyo',
];
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 8px">
    <div
      v-for="tz of timezones"
      :key="tz"
      style="display: flex; gap: 16px; align-items: center"
    >
      <code style="min-width: 160px">{{ tz }}</code>
      <wt-datetime-text :datetime="now" :timezone="tz" />
    </div>
  </div>
</template>