Skip to main content

FormattedDate

Reference​

  • The FormattedDate component is designed to display a formatted date string.
  • It uses the useSettingsContext hook to access global settings, such as the date format and UTC offset, and formats the provided dateStr using the formatDate utility function.

Props:​

  1. dateStr: A string representing the date to be formatted.
  2. style: An optional inline style object to customize the appearance of the rendered <span>.

Components:​

  1. FormattedDate: Formats and displays the full date based on the global dateFormat and utcOffset.
  2. FormattedDateWithOnlyMonthYear: Similar to FormattedDate, but formats the date to show only the month and year using the getMonthYearDateFormat utility.
  • Both components return a <span> element containing the formatted date, styled using the optional style prop.

Usage Example​

function Example(pageContext) {
  const { protrakComponents } = React.useContext(customWidgetContext);
  const { FormattedDate } = protrakComponents;

  return (
    <div>
      <H3>Date</H3>
      <FormattedDate dateStr="2021-10-19T00:00:00.000Z" />
    <div/>
  );
};

UI​

FormattedDate