FormatDate

Used to format dates to a specific format.

Demo

React
Vue

1.01.2021, 1:01 PM

1 Jan 2021

January, 1st of 2021

2021-01-01 13:01:00

Example

React
Vue

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

const value = new Date('2021-01-01 13:00:00');

return (
  <FormatDate value={value} />

  <FormatDate
    value={value}
    format="%j %M %Y"
  />

  <FormatDate
    value={value}
    format="%F, %j%S of %Y"
  />

  <FormatDate
    value={value}
    format="%Y-%m-%d %H:%m:%s"
  />
);

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

const value = new Date('2021-01-01 13:00:00');
</script>

<template>
  <FormatDate :value="value" />

  <FormatDate
    :value="value"
    format="%j %M %Y"
  />

  <FormatDate
    :value="value"
    format="%F, %j%S of %Y"
  />

  <FormatDate
    :value="value"
    format="%Y-%m-%d %H:%m:%s"
  />
</template>

Props

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

See the the table below for the available formats.

Date and time formats

Format	Description	Example
`%Y`	Year (4-digit)	`2021`
`%y`	Year (2-digit)	`21`
`%m`	Month number (with leading zero: 01-12)	`01`
`%n`	Month number (without leading zero: 1-12)	`1`
`%M`	Month name (short form: Jan)	`Jan`
`%F`	Month name (full form: January)	`January`
`%d`	Day (01-31)	`01`
`%j`	Day (1-31)	`1`
`%S`	Day ordinal suffix (st, nd, rd, th)	`st`
`%l`	Textual day of the week (short form: Mon, Tue, etc.)	`Mon`
`%L`	Textual day of the week (long form: Monday, Tuesday, etc.)	`Monday`
`%h`	Hour (12-hour format with leading zero: 01-12)	`01`
`%g`	Hour (12-hour format without leading zero: 1-12)	`1`
`%H`	Hour (24-hour format with leading zero: 00-23)	`00`
`%G`	Hour (24-hour format without leading zero: 0-23)	`0`
`%m`	Minute (00-59)	`00`
`%s`	Second (00-59)	`00`
`%A`	Uppercased AM/PM	`AM`
`%a`	Lowercased am/pm	`am`