I want to update a value according to the selected range in the date picker. This means, if I am staying from the 8th to the 11th, it should say 3 nights. If the dates are modified, this value should update accordingly. Working on a little 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>It is a very common feature when selecting dates in travel pages but I could not find any real example of it. If the date picker does not support something like this, can I achieve this behavior with JS expressions?
Thank you very much!
We need to use the select event:
<amp-date-picker on="select: AMP.setState({nights: event.dates.length})">
More info here. Thanks