Date

import Date from 'frui/formats/Date';
Copy

Props

NameTypeRequiredNotes
formatstringNoDate format
localestringNoLocalized settings
valuestring|number|DateYesDefault value

Basics

April 20th 2024, 8:00:00 am
<Date value="2024-04-20" />
Copy

Customize

You can apply different locales and formats to the Date format.

Format

Use format prop to format the date output.

April 20th 2024, 8:00 am
<Date />                                  // 2024-04-21T15:27:42+08:00
<Date format="MMMM Do YYYY, h:mm:ss a" /> // April 21st 2024, 3:27:14 pm
<Date format="dddd" />                    // Sunday
<Date format="MMM Do YY" />               // Apr 21st 24
<Date format="YYYY [escaped] YYYY" />     // 2024 escaped 2024
<Date format="LT" />                      // 3:24 PM
<Date format="LTS" />                     // 3:24:21 PM
<Date format="L" />                       // 04/21/2024
<Date format="l" />                       // 4/21/2024
<Date format="LL" />                      // April 21, 2024
<Date format="ll" />                      // Apr 21, 2024
<Date format="LLL" />                     // April 21, 2024 3:24 PM
<Date format="lll" />                     // Apr 21, 2024 3:24 PM
<Date format="LLL" />                     // Sunday, April 21, 2024 3:24 PM
<Date format="llll" />                    // Sun, Apr 21, 2024 3:26 PM
<Date format="ago" />                     // 5 minutes ago
<Date format="a" />                       // 5m
Copy
Currency
Email