Bento 日期显示

显示可渲染到页面中的时间数据。通过在 Bento 日期显示标签中提供特定的 属性，Bento 日期显示扩展程序会返回一个时间参数列表，你可以将该列表传递给 amp-mustache 模板 以进行渲染。有关每个返回的时间参数，请参阅 以下列表。

Web 组件

我们不支持 bento-date-display 的 Web 组件版本，因为 <template> 支持仍在设计中。此项工作可在 此问题 中进行跟踪。

Preact/React 组件

通过 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>
      )}
    />
  );
}

交互性和 API 使用

Bento 日期显示组件没有命令式 API。但是，Bento 日期显示 Preact/React 组件确实接受一个 render 属性，该属性会渲染消费者的模板。此 render 属性应为一个函数，Bento 日期显示 Preact/React 组件可使用该函数渲染其模板。render 回调将为消费者提供各种与日期相关的参数，以便他们在渲染的模板中进行插值。有关更多信息，请参阅 render 属性部分。

布局和样式

Bento 日期显示 Preact/React 组件允许消费者渲染自己的模板。这些模板可以使用内联样式、<style> 标签、导入自己样式表的 Preact/React 组件。

属性

datetime

必需属性。表示日期和时间，格式为日期、字符串或数字。如果是字符串，则必须是标准 ISO 8601 日期字符串（例如 2017-08-02T15:05:05.000Z）或字符串 now。如果设置为 now，它将使用页面加载的时间来渲染其模板。如果是数字，则必须是毫秒为单位的 POSIX 纪元值。

displayIn

可选属性，可以是 "utc" 或 "local"，默认为 "local"。此属性指示要以哪个时区显示日期。如果设置为 "utc"，组件会将给定日期转换为 UTC。

locale

每个计时器单位的国际化语言字符串。默认值为en（英语）。此属性支持用户浏览器支持的所有值。

localeOptions

localeOptions 对象支持 Intl.DateTimeFormat.options 参数下的所有选项，该参数指定用于 localeString 格式的格式化样式。

请注意，如果 displayIn 属性设置为 utc，则 localeOptions.timeZone 的值将自动转换为 UTC。

render

可选回调，用于呈现模板。该回调将提供一个对象，其中包含与 datetime 中表示的日期相关的属性/值。

默认情况下，Bento Date Display 组件将显示给定语言环境和语言环境选项的 localeString 日期格式。有关每个属性如何显示的更多详细信息，请参阅 返回的时间参数部分。

(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;
}

返回的时间参数

此表列出了您可以在 Mustache 模板中指定的格式