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 為自訂日期標記建立範本，例如圖示而不是月份編號。在此我們使用 taco 圖示取代月份編號，頻率為每週二每 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 偏好設定。我們在網址 /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>

靜態日曆選擇器

具有 mode="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 RRULE 列表，以指定不允許的日期。highlighted 屬性是以空格分隔的 ISO 8601 日期和 RFC 5545 RRULE 列表，用於指定以醒目提示樣式顯示的日期。在這裡，每個星期四都 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 撰寫