amp-date-picker
- 简介设置单日期选择器自定义日期标记日期范围选择器外部配置静态日期选择器高亮和阻止属性允许阻止日期属性灯箱日期选择器全屏灯箱日期选择器表单中的日期选择器使用 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 样式，您可以使用诸如 CalendarMonth_caption 之类的类，这些类继承自 react-dates。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 首选项。我们在 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>

静态日期选择器

带有 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。在官方 doc 中查找完整列表。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>

允许阻止日期属性

如果日期选择器使用 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 事件会打开灯箱。当用户在与日历视图交互时按下 escape 时，会触发 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