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

28.08.2026, 9:40:11

Code

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

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

Example Modes

FormatDateMode.DATE28.08.2026

FormatDateMode.TIME9:40

FormatDateMode.TIME_SEC9:40:11

FormatDateMode.DATETIME (default)28.08.2026, 9:40:11

FormatDateMode.DATETIME_SHORT28.08.2026, 9:40

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/Kyiv28.08.2026, 12:40:11

America/New_York28.08.2026, 5:40:11

Asia/Tokyo28.08.2026, 18:40:11

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>