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 (opens in a new tab) 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:

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

Design and Usability Tips

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

Data Size Duration