Date and time value
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