date-time

Since: ver.10.0.0

Props

Prop name	Type	Default	Description
`innerRef`	`Ref<HTMLTimeElement> \| undefined`		React ref forwarded to the time element.
`label`	`string \| undefined`		Time label for accessibility. E.g.: "Old arrival time: " or "New arrival time: ".
`Elem`	`"del" \| "ins" \| "span" \| "strong" \| undefined`		The wrapping element.
`wrapperRest`	`DelHTMLAttributes<HTMLElement> \| InsHTMLAttributes<HTMLElement> \| undefined`		Props forwarded to the wrapping element.
`dateFormat`	`"day, Mon D" \| "day, Mon D YYYY" \| "Month YYYY" \| "Mon YYYY" \| undefined`		Sets predefined formats
`displayTime`	`boolean \| undefined`		Adds time, if no dateFormat was provided, only time is displayed
`extraClasses`	`string \| undefined`		Custom class name for the `` element
`locale`	`string \| undefined`		The locale for date formatting. Used for `Intl.DateTimeFormat` API.
`date`	`Date`	`Required`	Date to show, needs to be a Date object
`intlFormatOptions`	`DateTimeFormatOptions \| undefined`		Options forwarded to Intl.DateTimeFormat API. Use to override and fine tailor the defaults when needed. Intl.DateTimeFormat

Check the FormattersProvider if you're struggling with performance issues due to too many formatters.

DateTime component acts as a simple wrapper around useDateFormatter hook. Mainly it ensures that dates have correct semantics and allows passing an accessible label. Output date/time format can be customized that via dateFormat and displayTime options.

Here is example displaying a Connection component with the date/time data formatted by the DateTime component:

import { Box, Connection, ConnectionStop, ConnectionTime, DateTime, FormRow, Heading, Grid, GridCell, Select, SelectOption } from '@flixbus/honeycomb-react';

const [exampleLocale, setExampleLocale] = React.useState('de');

const departureDate = new Date('April 17, 2024 10:24:00');
const arrivalDate = new Date('April 17, 2024 14:24:00');

<Grid>
  <GridCell colSpan={{ default: 12, lg: 6 }}>
    <FormRow>
        <Select aria-label="Pick a language" id="date-example-locale-switch" value={exampleLocale} onChange={(event) => { setExampleLocale(event.target.value) }}>
          <SelectOption value="de">Deutsch</SelectOption>
          <SelectOption value="en">English</SelectOption>
          <SelectOption value="uk">Українська</SelectOption>
        </Select>
    </FormRow>
    <Box>
      <Heading sectionHeader size={4}><DateTime dateFormat="day, Mon D" locale={exampleLocale} date={departureDate} /></Heading>
      <Connection>
        <ConnectionStop
          station="Berlin Alexanderplatz"
          time={<ConnectionTime time={<DateTime displayTime locale={exampleLocale} date={departureDate} />} />}
        />
        <ConnectionStop
          station="Dresden Hbf"
          time={<ConnectionTime time={<DateTime displayTime locale={exampleLocale} date={arrivalDate} />} />}
        />
      </Connection>
    </Box>
  </GridCell>
</Grid>
import { Box, Connection, ConnectionStop, ConnectionTime, DateTime, FormRow, Heading, Grid, GridCell, Select, SelectOption } from '@flixbus/honeycomb-react';

const [exampleLocale, setExampleLocale] = React.useState('de');

const departureDate = new Date('April 17, 2024 10:24:00');
const arrivalDate = new Date('April 17, 2024 14:24:00');

<Grid>
  <GridCell colSpan={{ default: 12, lg: 6 }}>
    <FormRow>
        <Select aria-label="Pick a language" id="date-example-locale-switch" value={exampleLocale} onChange={(event) => { setExampleLocale(event.target.value) }}>
          <SelectOption value="de">Deutsch</SelectOption>
          <SelectOption value="en">English</SelectOption>
          <SelectOption value="uk">Українська</SelectOption>
        </Select>
    </FormRow>
    <Box>
      <Heading sectionHeader size={4}><DateTime dateFormat="day, Mon D" locale={exampleLocale} date={departureDate} /></Heading>
      <Connection>
        <ConnectionStop
          station="Berlin Alexanderplatz"
          time={<ConnectionTime time={<DateTime displayTime locale={exampleLocale} date={departureDate} />} />}
        />
        <ConnectionStop
          station="Dresden Hbf"
          time={<ConnectionTime time={<DateTime displayTime locale={exampleLocale} date={arrivalDate} />} />}
        />
      </Connection>
    </Box>
  </GridCell>
</Grid>

Please note the usage of accessibility friendly labels in the example, these are only accessible by screen readers and help a lot with understanding the data.