时间戳

首页 > 解决方案 > amp-date-picker 如何选择过去的日期

amp-html - amp-date-picker 如何选择过去的日期

问题描述

我正在尝试在我的项目中实现 amp-date-picker，它可以工作，但我只能选择未来的日期。我需要用它来搜索以前的事件。我怎样才能做到这一点？任何想法？它可以工作，并且被 chrome 验证为 AMP。这似乎不是代码错误。我想知道这是否是因为缺乏某些配置。

这是我使用的代码：

<!doctype html>
<html ⚡&gt;
<head>
  <meta charset="utf-8">
  <title>AMP Date Picker Example</title>
  <link rel="canonical" href="amps.html" >
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <meta name="amp-experiments-opt-in" content="amp-date-picker">
  <style amp-custom>
  body {
    padding: 20px;
    min-height: 125vh;
  }

  .taco-tuesday {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  [type=tel],[type=date] {
    padding: 13px 35px;
    font-size: 16px;
    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-position: 5px 40%;
    background-repeat: no-repeat;
    background-size: 25px 25px;
    border: 1px solid lightgray;
  }

  .amp-date-picker-selecting {
    border-bottom: 2px solid blue;
  }

  .spacer {
    margin-bottom: 360px;
  }
  </style>
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
  <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
  <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
  <script async custom-element="amp-date-picker" src="https://cdn.ampproject.org/v0/amp-date-picker-0.1.js"></script>
  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>

<form
  method="post"
  action-xhr="/form/echo-json/post"
  target="_blank">
  <amp-date-picker
      mode="overlay"
      layout="container"
      input-selector="[name=deliverydate]">
    <label for="deliverydate">Deliver Date:</label>
    <input type="text" name="deliverydate">
  </amp-date-picker>
</form>


<div class="spacer"></div>
</body>
</html>

标签： amp-htmlgoogle-amp

解决方案

我终于找到了解决我的问题的方法。在此 URL https://ampbyexample.com/components/amp-date-picker/中，文档已更新，现在您可以在“日期范围选择器”下看到，其定义表明您可以通过添加“启用过去的日期” min" 属性与您希望它开始的日期的值，如下所示：

    <form
      method="post"
      action-xhr="/form/echo-json/post"
      target="_blank">
      <amp-date-picker
          mode="overlay"
          min="2017-10-26"
          layout="container"
          input-selector="[name=deliverydate]">
        <label for="deliverydate">Deliver Date:</label>
        <input type="text" name="deliverydate">
      </amp-date-picker>
    </form>

推荐阅读