FormatDate

Used to format dates to a specific format.

Demo

React
Vue

25.12.2025, 0:58 PM

25th December 2025

2025-12-25 12:58:00

Usage

React
Vue

import { FormatDate } from '@fintech-sandpit/ui/react';

return (
  <FormatDate
    value={new Date()}
  />

  <FormatDate
    value={new Date()}
    format="%d %N %Y"
  />

  <FormatDate
    value={new Date()}
    format="%Y-%M-%D %H:%m:%s"
  />
);

<script setup lang="ts">
import { FormatDate } from '@fintech-sandpit/ui/vue';
</script>

<template>
  <FormatDate
    :value="new Date()"
  />

  <FormatDate
    :value="new Date()"
    format="%d %N %Y"
  />

  <FormatDate
    :value="new Date()"
    format="%Y-%M-%D %H:%m:%s"
  />
</template>

Props

Name	Type	Required	Default	Description
`value`	`Date \| string`	Yes		Value to format
`format`	`string`		`%D.%M.%Y, %h:%m %A`	Date and time format to use ¹

Date and time formats supported:

%Y - Year (4-digit)
%y - Year (2-digit)
%M - Month (01-12)
%D - Day (01-31)
%d - Day (1st-31st)
%N - Month name (full)
%n - Month name (short)
%h - Hour (12-hour format)
%H - Hour (24-hour format)
%m - Minute (00-59)
%s - Second (00-59)
%A - AM/PM
%a - am/pm