amp-date-picker
- 簡介設定單一日曆日期選擇器自訂日期標記日期範圍選擇器外部設定靜態日期選擇器醒目提示和封鎖的屬性 allow-blocked-dates 屬性燈箱日期選擇器全螢幕燈箱日期選擇器表單中的日期選擇器具有 amp-bind 的日期選擇器

網站

amp-date-picker

簡介

amp-date-picker 是一個 AMP 元件，可讓您選取單一日曆日期或日期範圍。其基於 react-dates 實作

設定

包含 amp-date-picker 元件。

<script async custom-element="amp-date-picker" src="https://cdn.ampproject.org/v0/amp-date-picker-0.1.js"></script>

包含 amp-bind 元件以根據選取的日期設定變數。

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

包含 amp-mustache 元件以在日期選擇器下方顯示資訊面板。

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

包含 amp-lightbox 元件以在全螢幕燈箱視圖中顯示日期選擇器。

<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>

包含 amp-form 元件以建立表單。

<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

為了個人化 amp-date-picker 樣式，您可以使用繼承自 react-dates 的類別，例如 CalendarMonth_caption。amp-date-picker 也公開 CSS 類別，您可以在 CSS 規則中使用，例如套用至使用者正在編輯的日期輸入的 amp-date-picker-selecting。

<style amp-custom>
:root {
--color-primary: #005AF0;
--color-text-light: #fff;
--color-bg-light: #FAFAFC;
--space-2: 1rem;   /* 16px */
--space-1: 0.5rem; /* 8px */
}

.example-picker {
  display: flex;
}

.example-picker[mode="overlay"] {
  padding: var(--space-2);
}

.example-picker .CalendarMonth_caption {
  color: var(--color-text-light);
}

.example-picker [type="range"] .amp-date-picker-selecting {
  border-bottom-color: var(--color-primary);
  color: var(--color-primary);
}

.space-between > * + * {
  margin-left: var(--space-2);
}

#lb {
  background: var(--color-bg-light);
}

#lb .align-content-center {
  height: 100%;
}

.icon-input {
  background-image: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1393.1 1500" style="enable-background:new 0 0 1393.1 1500;" xml:space="preserve"><path d="M107.2,1392.9h241.1v-241.1H107.2V1392.9z M401.9,1392.9h267.9v-241.1H401.9V1392.9z M107.2,1098.2h241.1V830.4H107.2 V1098.2z M401.9,1098.2h267.9V830.4H401.9V1098.2z M107.2,776.8h241.1V535.7H107.2V776.8z M723.4,1392.9h267.9v-241.1H723.4V1392.9z M401.9,776.8h267.9V535.7H401.9V776.8z M1044.8,1392.9H1286v-241.1h-241.1V1392.9z M723.4,1098.2h267.9V830.4H723.4V1098.2z M428.7,375V133.9c0-7.3-2.7-13.5-8-18.8c-5.3-5.3-11.6-8-18.8-8h-53.6c-7.3,0-13.5,2.7-18.8,8c-5.3,5.3-8,11.6-8,18.8V375 c0,7.3,2.7,13.5,8,18.8c5.3,5.3,11.6,8,18.8,8h53.6c7.3,0,13.5-2.7,18.8-8C426,388.5,428.7,382.3,428.7,375z M1044.8,1098.2H1286 V830.4h-241.1V1098.2z M723.4,776.8h267.9V535.7H723.4V776.8z M1044.8,776.8H1286V535.7h-241.1V776.8z M1071.6,375V133.9 c0-7.3-2.7-13.5-8-18.8c-5.3-5.3-11.6-8-18.8-8h-53.6c-7.3,0-13.5,2.7-18.8,8c-5.3,5.3-8,11.6-8,18.8V375c0,7.3,2.7,13.5,8,18.8 c5.3,5.3,11.6,8,18.8,8h53.6c7.3,0,13.5-2.7,18.8-8C1069,388.5,1071.6,382.3,1071.6,375z M1393.1,321.4v1071.4 c0,29-10.6,54.1-31.8,75.3c-21.2,21.2-46.3,31.8-75.3,31.8H107.2c-29,0-54.1-10.6-75.3-31.8C10.6,1447,0,1421.9,0,1392.9V321.4 c0-29,10.6-54.1,31.8-75.3s46.3-31.8,75.3-31.8h107.2v-80.4c0-36.8,13.1-68.4,39.3-94.6S311.4,0,348.3,0h53.6 c36.8,0,68.4,13.1,94.6,39.3c26.2,26.2,39.3,57.8,39.3,94.6v80.4h321.5v-80.4c0-36.8,13.1-68.4,39.3-94.6 C922.9,13.1,954.4,0,991.3,0h53.6c36.8,0,68.4,13.1,94.6,39.3s39.3,57.8,39.3,94.6v80.4H1286c29,0,54.1,10.6,75.3,31.8 C1382.5,267.3,1393.1,292.4,1393.1,321.4z"/></svg>');
  background-repeat: no-repeat;
  flex-shrink: 0;
  height: 28px;
  margin-top: var(--space-1);
  width: 27px;
}
</style>

單一日曆日期選擇器

type=single 的 amp-date-picker 可用於選取單一日曆日期。您可以使用具有 info-template 屬性的 amp-mustache 在日曆下方顯示資訊面板，此處我們顯示您剛選取的日期。info-template 也啟用 AMP 繫結，使使用 AMP.setState 設定的變數可用。元件需要預留位置。對於單一日曆日期，這可以採用以下形式：<input amp-date-placeholder placeholder="選擇日期">。amp-date-picker 引入了 clear 和 today 動作。可以在點擊按鈕後呼叫 clear 以清除日期選取。today 動作允許使用者快速選取今日日期，其 offset 引數會選擇從今天起算多少天來設定日期。

<amp-date-picker id="simple-date-picker" type="single" mode="overlay" layout="container" on="select:AMP.setState({date1: event.date, dateType1: event.id})" format="YYYY-MM-DD" open-after-select input-selector="[name=date1]" class="example-picker space-between">
  <div class="icon-input"></div>
  <input name="date1" placeholder="Pick a date">
  <button on="tap: simple-date-picker.clear">Clear</button>
  <button on="tap: simple-date-picker.today">Today</button>
  <button on="tap: simple-date-picker.today(offset=1)">Tomorrow</button>
  <template type="amp-mustache" info-template>
    <span [text]="date1 != null ? 'You picked ' + date1 + '.' : 'You will see your chosen date here.'">You will see your chosen date here.</span>
  </template>
</amp-date-picker>

自訂日期標記

此外，您也可以使用 amp-mustache 建立自訂日期標記的範本，例如使用圖示而不是月份的數字。此處我們使用墨西哥捲餅圖示來代替月份的數字，頻率為每週二每 2 週一次。常見的使用案例可能是月份中某個商品的價格固定為特定數字的日期。

<amp-date-picker id="simple-date-picker-2" type="single" mode="overlay" layout="container" on="select:AMP.setState({date2: event.date, dateType2: event.id})" locale="en" format="YYYY-MM-DD" open-after-select input-selector="[name=date2]" class="example-picker space-between">
  <input class="border-none p0" name="date2" placeholder="Pick a date">
  <button on="tap: simple-date-picker-2.clear">Clear</button>
  <template type="amp-mustache" date-template dates="FREQ=WEEKLY;DTSTART=20180101T000000Z;INTERVAL=2;WKST=SU;BYDAY=TU" id="tacos2">
    <span>🌮</span>
    <span class="taco-tuesday"></span>
  </template>
  <template type="amp-mustache" info-template>
    <span [text]="date2 ? 'You picked ' + date2 + '.' +
      (dateType2 == 'tacos2' ? ' Happy Taco Tuesday!' : '') : ''">You will see your chosen date here.</span>
  </template>
</amp-date-picker>

日期範圍選擇器

type=range 的 amp-date-picker 可用於選取日期範圍。預設情況下，amp-date-picker 會停用過去的日期，請使用 min 屬性來啟用它們。

<amp-date-picker type="range" mode="overlay" id="range-date-picker" on="
  select:
    AMP.setState({
        dates: event.dates,
        startDate: event.start,
        endDate: event.end
    })" format="YYYY-MM-DD" open-after-select min="2017-10-26" start-input-selector="#range-start" end-input-selector="#range-end" class="example-picker space-between">
  <input id="range-start" placeholder="Start date">
  <input id="range-end" placeholder="End date">
  <button on="tap:range-date-picker.clear">Clear</button>
  <template type="amp-mustache" info-template>
    <span [text]="(startDate && endDate ?
      'You picked ' + startDate.date + ' as start date and ' + endDate.date + ' as end date.' :
      'You will see your chosen dates here.')">
      You will see your chosen dates here.
    </span>
  </template>
</amp-date-picker>

外部設定

可以使用外部 json 設定 amp-date-picker 偏好設定。我們在 URL /json/amp-date-picker.json 使用以下 JSON

  {
    "templates": [{
      "id": "spooky",
      "dates": [
        "FREQ=WEEKLY;DTSTART=20180101T160000Z;BYDAY=MO",
        "FREQ=YEARLY;DTSTART=20180101T160000Z;WKST=SU;BYMONTH=10;BYMONTHDAY=31",
        "FREQ=MONTHLY;DTSTART=20180101T160000Z;WKST=SU;BYDAY=FR;BYMONTHDAY=13"
      ]
    }]
  }

對於符合 JSON blob 中日期清單的日期，將使用 id="spooky" 的範本在日曆中呈現該天。在此案例中，這些日期是星期一、13 號星期五和萬聖節。

<amp-date-picker id="src-picker" type="single" mode="overlay" layout="container" format="YYYY-MM-DD" src="/static/samples/json/amp-date-picker.json" input-selector="#src-input" class="example-picker space-between">
  <input id="src-input" placeholder="Pick a date">
  <button on="tap: src-picker.clear">Clear</button>
  <template type="amp-mustache" date-template id="spooky">
    <span>🙀</span>
  </template>
</amp-date-picker>

靜態日期選擇器

模式為 "static" 的 amp-date-picker 可以顯示日曆視圖。靜態選擇器可以搭配或不搭配附加的輸入使用。

<amp-date-picker id="static-picker" type="single" mode="static" layout="fixed-height" height="360" format="YYYY-MM-DD" input-selector="#static-picker-input">
</amp-date-picker>

醒目提示和封鎖的屬性

amp-date-picker 支援一系列屬性，例如 highlighted 和 blocked。在官方文件中找到完整清單。blocked 屬性允許指定以空格分隔的 ISO 8601 日期和 RFC 5545 RRULEs 清單，以指定不允許的日期。highlighted 屬性是以空格分隔的 ISO 8601 日期和 RFC 5545 RRULEs 清單，指定以醒目提示樣式顯示的日期。此處，每個星期四都會 highlighted，而每個週末都會 blocked。

<amp-date-picker id="simple-date-picker-3" type="single" mode="static" layout="fixed-height" height="360" on="select:AMP.setState({date3: event.date ? event.date : ''})" locale="en" format="YYYY-MM-DD" highlighted="FREQ=WEEKLY;WKST=SU;BYDAY=TH" blocked="FREQ=WEEKLY;WKST=SU;BYDAY=SA,SU">
</amp-date-picker>

allow-blocked-dates 屬性

如果日期選擇器使用 type="range" 且有允許成為範圍一部分的封鎖日期，則 allow-blocked-dates 屬性允許使用者選取包含封鎖日期的範圍。

<amp-date-picker id="simple-date-picker-4" type="range" mode="static" layout="fixed-height" height="360" on="select:AMP.setState({date4: event.date ? event.date : ''})" locale="en" format="YYYY-MM-DD" allow-blocked-ranges highlighted="FREQ=WEEKLY;WKST=SU;BYDAY=TH" blocked="FREQ=WEEKLY;WKST=SU;BYDAY=SA,SU">
</amp-date-picker>

amp-date-picker 可以在模態燈箱內顯示。如果使用者將焦點放在選擇器連線的輸入元素上並按下向下箭頭鍵，activate 事件會開啟燈箱。當使用者在與日曆視圖互動時按下 Esc 鍵時，會觸發 deactivate。對於僅限觸控介面的方塊，當使用者點擊輸入時，on="tap:..." 屬性會開啟選擇器。

選擇您的旅行日期

<p>Choose your travel dates</p>
  <input id="lb-start" placeholder="Start date" on="tap:lb.open" role="textbox" tabindex="0">
  <input id="lb-end" placeholder="End date" on="tap:lb.open" role="textbox" tabindex="0">
  <button on="tap:lb-picker.clear">Clear</button>
<amp-lightbox id="lb" layout="nodisplay">
  <button on="tap:lb.close" tabindex="0">Close</button>
  <div class="align-content-center">
    <amp-date-picker id="lb-picker" type="range" mode="static" layout="fixed-height" height="360" format="MM/DD/YYYY" on="activate: lb.open;
          deactivate: lb.close;" start-input-selector="#lb-start" end-input-selector="#lb-end"></amp-date-picker>
  </div>
</amp-lightbox>

amp-date-picker 也可以在燈箱內顯示為全螢幕視圖。fullscreen 屬性會告知日期選擇器佔用其容器中的空間，並允許其內容垂直捲動。

選擇您的旅行日期

<p>Choose your travel dates</p>
    <input id="lb-fullscreen-start" placeholder="Start date" on="tap:lb-fullscreen.open" role="textbox" tabindex="0">
    <input id="lb-fullscreen-end" placeholder="End date" on="tap:lb-fullscreen.open" role="textbox" tabindex="0">
    <button on="tap:lb-fullscreen-picker.clear">Clear</button>
  <amp-lightbox id="lb-fullscreen" layout="nodisplay" scrollable>
    <button on="tap:lb-fullscreen.close" tabindex="0">Close</button>
    <amp-date-picker id="lb-fullscreen-picker" fullscreen layout="fill" mode="static" type="range" number-of-months="12" format="MM/DD/YYYY" on="activate: lb-fullscreen.open;
          deactivate: lb-fullscreen.close;" start-input-selector="#lb-fullscreen-start" end-input-selector="#lb-fullscreen-end"></amp-date-picker>
  </amp-lightbox>

表單中的日期選擇器

amp-date-picker 與 AMP 表單整合。如果您未提供靜態選擇器的輸入，它將建立一個隱藏的輸入以在表單中提交。

<form method="post" action-xhr="/documentation/examples/api/submit-form-xhr" target="_top">
  <amp-date-picker id="form-picker" type="single" mode="static" layout="fixed-height" height="360" format="YYYY-MM-DD">
  </amp-date-picker>
  <input type="submit">
  <div submit-success>
    <template type="amp-mustache">
      Success! Thanks for trying the <code>amp-form</code> demo!
    </template>
  </div>
  <div submit-error>
    <template type="amp-mustache">
      Error!
    </template>
  </div>
</form>

具有 amp-bind 的日期選擇器

amp-date-picker 與 amp-bind 整合。min 和 max 屬性可用於更新最小和最大日期。

<amp-state id="binding">
  <script type="application/json">
  {"min": "", "max": ""}
  </script>
</amp-state>
<input on="change:AMP.setState({binding: {min: event.value}})" placeholder="Minimum date">
<input on="change:AMP.setState({binding: {max: event.value}})" placeholder="Maximum date">
<amp-date-picker id="bind-picker" type="single" mode="static" layout="fixed-height" height="360" format="MM/DD/YYYY" [min]="binding.min" [max]="binding.max">
</amp-date-picker>

需要更多說明嗎？

如果此頁面上的說明未涵蓋您的所有問題，請隨時與其他 AMP 使用者聯繫，以討論您的確切使用案例。

前往 Stack Overflow

未說明的特色？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的持續參與者，但我們也歡迎您針對您特別感興趣的問題做出一次性貢獻。

在 GitHub 上編輯範例

由 @kul3r4 撰寫