Bento Date Display

Displays time data that you can render in your page. By providing specific attributes in the Bento Date Display tag, the Bento Date Display extension returns a list of time parameters, which you can pass to an amp-mustache template for rendering. Refer to the list below for each returned time parameter.

Web Component

We don't support the web component version of bento-date-display since <template> support is still being designed. This effort can be tracked in this issue.

Preact/React Component

Import via npm

npm install @bentoproject/date-display

import React from 'react';
import {BentoDateDisplay} from '@bentoproject/date-display/react';
import '@bentoproject/date-display/styles.css';

function App() {
  return (
    <BentoDateDisplay
      datetime={dateTime}
      displayIn={displayIn}
      locale={locale}
      render={(date) => (
        <div>{`ISO: ${date.iso}; locale: ${date.localeString}`}</div>
      )}
    />
  );
}

Interactivity and API usage

The Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a render prop that renders the consumer's template. This render prop should be a function which the Bento Date Display Preact/React component can use to render its template. The render callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the render prop section for more information.

Layout and style

The Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, <style> tags, Preact/React components that import their own stylesheets.

Props

datetime

Required prop. Denotes the date and time as a Date, String, or Nuumber. If String, must be a standard ISO 8601 date string (e.g. 2017-08-02T15:05:05.000Z) or the string now. If set to now, it will use the time the page loaded to render its template. If Number, must be a POSIX epoch value in milliseconds.

displayIn

Optional prop that can be either "utc" or "local" and defaults to "local". This prop indicates what timezone to display the date in. If set to the value "utc", the component will convert the given date to UTC.

locale

An internationalization language string for each timer unit. The default value is en (for English). This prop supports all values that are supported by the user's browser.

localeOptions

The localeOptions object supports all the options under Intl.DateTimeFormat.options parameter that specifies the formatting style to use for localeString format.

Note that if the displayIn prop is set to utc, the value of localeOptions.timeZone will automatically be converted to UTC.

render

Optional callback that should render a template. The callback will be provided an object with properties/values related to the date expressed in datetime.

By default, the Bento Date Display component will display the localeString form of the Date for the given locale and localeOption. See the Returned Time Parameters section for more details on how each property will be displayed.

(dateParams: DateParams) => JSXInternal.Element
interface DateParams {
  day: number;
  dayName: string;
  dayNameShort: string;
  dayPeriod: string;
  dayTwoDigit: string;
  hour: number;
  hour12: number;
  hour12TwoDigit: string;
  hourTwoDigit: string;
  iso: string;
  localeString: string;
  minute: number;
  minuteTwoDigit: string;
  month: number;
  monthName: string;
  monthNameShort: string;
  monthTwoDigit: string;
  second: number;
  secondTwoDigit: string;
  timeZoneName: string;
  timeZoneNameShort: string;
  year: number;
  yearTwoDi: string;
}

Returned Time Parameters

This table lists the format you can specify in your Mustache template: