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计算日期差

1 个答案: