使用 amp-date-picker 计算日期差异

Question

我想根据日期选择器中的选定范围更新一个值。这意味着，如果我从 8 号到 11 号入住，应该说是 3 晚。如果日期被修改，这个值应该相应地更新。工作一点 demo:

    <p>Choose your travel dates</p>
    <div class="align-content-center space-between">
      <div class="ampstart-input">
        <input class="border-none p0" id="lb-start" placeholder="Start date" on="tap:lb.open" role="textbox" tabindex="0">
      </div>
      <div class="ampstart-input">
        <input class="border-none p0" id="lb-end" placeholder="End date" on="tap:lb.open" role="textbox" tabindex="0">
      </div>
      <button class="ampstart-btn caps" on="tap:lb-picker.clear">Clear</button>
    </div>
    <amp-lightbox id="lb" layout="nodisplay">
      <button class="ampstart-btn absolute m1 caps small-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>
<p>Total nights: </p>

在旅行页面中选择日期时，这是一个非常常见的功能，但我找不到任何真实的例子。如果日期选择器不支持这样的东西，我可以用 JS expressions 实现这个行为吗？

非常感谢！

Answer 1

我们需要使用 select 事件：

<amp-date-picker on="select: AMP.setState({nights: event.dates.length})">

更多信息here。谢谢

使用 amp-date-picker 计算日期差异

Compute date difference with amp-date-picker

amp-html

amp-date-picker