Text
Date Time
The date time component is a styled, HTML5 time element for displaying date and time.
Interactive demo
This demo lets you preview the date time component, its variations, and configuration options.
Anatomy
Date time contains one required element.
| Item | Name | Description | Component | Optional |
|---|
Options
The date time has options for different use cases:
Prefix
Text placed in front of the date and time, separated by a space.
Suffix
Text placed after the date and time, separated by a comma and a space.
Date and time format
Specify a format for displaying the date and time. See date-fns docsfor the available settings.
Prefix
Text placed in front of the date and time, separated by a space.
Suffix
Text placed after the date and time, separated by a comma and a space.
Date and time format
Specify a format for displaying the date and time. See date-fns docsfor the available settings.
Usage
Here’s how and when to use the date time component:
Do consider the appropriate format for your users
In British English, the month follows the day. In American English, the month precedes the day.
Accessibility considerations
The Date Time component is wrapped in an HTML5 time element. The date prop provided is passed into its datetime attribute to make the date displayed fully accessible.
API
Date time has a range of props that can be used to define an appropriate experience for different use cases.
| Name | Type | Default | Description | Required |
|---|