Bento 日期倒數計時

顯示倒數至指定日期的時間。請參閱 傳回時間參數區段 來取得可用時間參數資訊。

網路組件

由於 <template> 支援仍持續設計中，我們不支援 bento-date-countdown 的網路組件版本。這項工作可於此 問題 追蹤。

Preact/React 組件

透過 npm 匯入

npm install @bentoproject/date-countdown

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

function App() {
  return (
    <BentoDateCountdown
      datetime={200000000}
      biggestUnit={'HOURS'}
      render={(data) => (
        <div>
          <span>{`${data.days} ${data.dd} ${data.d}`}</span>
          <br />
          <span>{`${data.hours} ${data.hh} ${data.h}`}</span>
          <br />
          <span>{`${data.minutes} ${data.mm} ${data.m}`}</span>
          <br />
          <span>{`${data.seconds} ${data.ss} ${data.s}`}</span>
        </div>
      )}
    />
  );
}

互動和 API 使用

Bento 日期倒數計時組件沒有命令式 API。但 Bento 日期倒數計時 Preact/React 組件接受 render prop，用來提供使用者的範本。此 render prop 應該是讓 Bento 日期倒數計時 Preact/React 組件用來提供範本的函式。 render 回呼會提供各種日期相關參數，供使用者套用至提供之範本中。請參閱 render prop 區段 以取得更多資訊。

版面配置和樣式

Bento 日期倒數計時 Preact/React 組件讓使用者提供自己的範本。這些範本可以使用內嵌樣式、<style> 標籤、匯入自身樣式表的 Preact/React 組件。

屬性

datetime

必填屬性。以 Date、字串或數字表示日期和時間。如果是字串，必須是標準 ISO 8601 日期字串（例如：2017-08-02T15:05:05.000Z）或字串 now。如果設為 now，它將使用已載入頁面的時間來提供範本。如果是數字，必須是毫秒為單位的 POSIX epoch 值。

locale

每個計時器單位的國際化語言字串。預設值是 en（表示英文）。此屬性支援使用者瀏覽器支援的所有值。

whenEnded

指定在計時器達到 0 秒時是否停止計時器。值可以設為 stop（預設值）以指示計時器在 0 秒時停止，而且不會超過最後日期；也可以設為 continue 以指示計時器在達到 0 秒後繼續計時。

biggestUnit

讓 bento-date-countdown 元件能夠根據指定 biggest-unit 的值來計算時間差。例如，假設剩餘 50 天 10 小時 時間，若 biggest-unit 設為 hours，則顯示的結果為 1210 小時。

• 支援的值：days、hours、minutes、seconds
• 預設值：days

countUp

加入此屬性，即可將倒數計時的順序反向為正數計時。這在用於顯示自過去某個目標日期以來所經過的時間時很有用。若要繼續在目標日期已過時倒數計時，請務必加上 `when-ended` 屬性，其值為 `continue`。若目標日期在未來，則 `bento-date-countdown` 會顯示減少到 0 的負值。

render

可選擇的 callback，用於繪製範本。此 callback 會提供一個物件，其中包含與 `datetime` 中所表達的日期相關的屬性/值。

預設情況下，Bento Date Countdown 元件會針對特定語言環境以及語言環境選項顯示 Date 的 localeString 表單。有關每個屬性如何顯示的詳細資訊，請參閱 傳回時間參數區段。

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

傳回時間參數

此表格列出您可以在設定檔範本中指定的格式

格式化值範例

此表格提供了在設定檔範本中所指定的格式化值範例，以及輸出的範例