FormatDate

Used to format dates to a specific format.

Demo

React
Vue

18.03.2026, 10:17 AM

18th March 2026

2026-03-18 10:17:35

Example

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