Date and time value

Date and time value in Storybook

The DateValue component offers a number of prebuilt formatting options.

Note that choosing short for the format option gives you something like Jan 9, 2020.

It intentionally does not give you 1/9/2020 - which is ambiguous (Sept 1st, or Jan 9th?)

Prefix and suffix

Use prefix and suffix props with caution.

Usage will produce what are essentially concatenated strings, like:

"Some prefix string " + someDateValue + " some suffix string"

This is not localization friendly. Better practice would be to use a formatted message.

Inlining

By default, the value comes back wrapped in a <div>.

If you want to inline the date / date-time value, then set the tag prop to span.

Imperative API

jutro-components offers the formatDate API.

formatDate(intl, props, date), where:

• @param {import('react-intl').Intl} intl - instance of the imperative formatting API access object
• @param {PropTypes.InferProps<FormattedDate.propTypes>} props - FormattedDate props
• @param {Date} [date] - Date value override to be used instead of the one provided with props
• @returns {string} - Formatted date string

Examples

import { formatDate } from '@jutro/components';
import { IntlContext } from '@jutro/locale';
...
const intl = useContext(IntlContext);
...
const d1 = formatDate(intl, { value: { year: 2020, month: 2, day: 22, hour: 3, minute: 24 }, displayFormat: 'abbreviated' });
const d2 = formatDate(intl, { value: { year: 2020, month: 2, day: 22, hour: 3, minute: 24 }, displayFormat: 'full' })
const d3 = formatDate(intl, { }, { year: 2020, month: 2, day: 22, hour: 3, minute: 24 })
const d4 = formatDate(intl, { value: { year: 2020, month: 2, day: 22, hour: 3, minute: 24 }, displayFormat: 'abbreviated', inputFormat: 'yyyy/MM/dd hh:mm',});

// en-US output:
Sun, Mar 22, 2020
Sunday, March 22, 2020
Mar 22, 2020
Sun, Dec 17, 1995, 03:24 AM

// pl-PL output
niedz., 22 mar 2020
niedziela, 22 marca 2020
22 mar 2020
niedz., 17 gru 1995, 03:24