如何配置amp-date-picker以支持选择过去日期？

嗨，我来帮你搞定这个问题！你遇到的amp-date-picker只能选未来日期的情况，确实是因为缺少了控制日期范围的配置项，完全不是代码错误~

核心原因 #

默认情况下，amp-date-picker的min属性会默认设为当前日期，所以用户只能选择今天及以后的日期。要支持选择过往日期，只需要显式配置min属性，指定允许选择的最早日期即可。

配置方案 #

你需要给amp-date-picker添加以下关键属性：

• min：设置允许选择的最早日期，可以是固定格式的日期（如2018-01-01），也可以是相对值（如"-10y"表示10年前，"-365d"表示1年前）
• max（可选）：如果不需要用户选择未来日期，可以把这个属性设为"today"或者当前固定日期，限制可选范围的上限

完整示例代码 #

结合你提供的代码片段，补全并添加正确配置后的完整代码如下：

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <title>AMP Date Picker Example</title>
  <link rel="canonical" href="your-page-url.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <!-- 确保正确引入amp-date-picker组件 -->
  <script async custom-element="amp-date-picker" src="https://cdn.ampproject.org/v0/amp-date-picker-0.1.js"></script>
  <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>
</head>
<body>
  <!-- 配置了过往日期范围的日期选择器 -->
  <amp-date-picker
    layout="fixed"
    width="240"
    height="32"
    min="2018-01-01" <!-- 允许选择2018年1月1日及以后的日期 -->
    max="today" <!-- 限制只能选择今天及以前的日期，适合搜索过往活动 -->
    value="2023-10-05" <!-- 默认选中的日期，可选 -->
  >
    <input type="date" placeholder="选择过往活动日期">
  </amp-date-picker>
</body>
</html>

额外说明 #

• 确认你已经正确引入了amp-date-picker组件的脚本，这是组件正常运行的前提
• 配置完成后，你可以再次用Chrome的AMP验证工具检查，确保配置符合AMP规范

内容的提问来源于stack exchange，提问作者Denis