Skip to main content

FormattedDateTime

Reference​

  • The FormattedDateTime component is used to display formatted date-time or time strings.
  • It formats and displays a date/time string with the specified date/time zone

Components and Props:​

  1. FormattedDateTime:

    • Props:
      • dateTimeStr: A string representing the date-time to be formatted.
      • style: An optional inline style object for customizing the <span> appearance.
      • isUtcTimeZone: A boolean (default: false) to determine if the date-time should be formatted in UTC (+00:00) or the local UTC offset.
    • Usage: Formats and displays a date-time string with the specified time zone.

  2. FormattedTime:

    • Props:
      • timeStr: A string representing the time to be formatted.
      • style: An optional inline style object for customizing the <span> appearance.
    • Usage: Formats and displays a time string based on the global time format and UTC offset.
  • Both components return a <span> element containing the formatted value, styled using the optional style prop.

Usage Example​

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

  return (
    <div>
      <H3>Date along with Time</H3>
      <FormattedDateTime dateTimeStr="2025-04-07T11:44:34.263Z" />
    <div/>
  );
};

UI​

FormattedDateTime