Date Format

The Date Format component simplifies the process of converting standard date formats into more readable forms or formats tailored to the user’s locale preferences. Leveraging the capabilities of date-fns flexibility in displaying dates in both absolute and relative terms.

Quick Start

To start using the DateFormat component, import it from the reablocks library and provide the date and format props.

import { DateFormat } from 'reablocks';


export default function App() {
return (
  <DateFormat
    date="2022-05-25T16:03:12.2085"
    format="MM/dd/yyyy hh:mm"
  />
);
}

import { DateFormat } from 'reablocks';

export default function App() {
return (
  <DateFormat
    date="2022-05-25T16:03:12.2085"
    format="MM/dd/yyyy hh:mm"
  />
);
}

05/25/2022 04:03

Examples

Basic Usage

For straightforward applications, the component can directly format the current date and time into a default format.

Relative Time

The component also supports displaying dates in relative terms, such as “3 months ago”, which can be particularly useful for content timestamps.

API

The Date Format component is highly configurable with several properties to adjust its behavior and output format:

Name	Type	Default
`allowToggle`	`boolean` Allow the user to toggle between relative and absolute time.	`false`
`cacheKey`	`string` The cache key to use for storing the user’s preference.
`date`	`string \| number \| Date \| null` The date to format.
`format`	`string` The format to use.	`'MM/dd/yy hh:mm:ss a'`
`fromNow`	`boolean` Whether to use relative time.
`addSuffix`	`boolean` Whether to add a suffix to the relative time.	`true`
`className`	`string` Additional CSS class names to use.
`includeSeconds`	`boolean` Whether to include seconds in the relative time.	`false`
`emptyMessage`	`string` The message to display when the date is empty. Default is “N/A”.	`'N/A'`
`theme`	`DateFormatTheme` Theme for the DateFormat.

Design and Usability Tips

User Preference: Allow users to select their preferred date format settings if possible, catering to global audiences and personal preferences.