Capture finish date as a read-only or hidden field

booking-form.snippet.html

{% comment %}
BookThatApp auto installed snippet. Changes made to this file will be lost if installed again.
{% endcomment %}

{% if product.metafields.bookthatapp.config %}
<div class="booking-form">
    {% capture attribute %}booking-start{% endcapture %}
    <label for="{{ attribute }}-{{ product.handle }}">Start date</label>
    <input id="{{ attribute }}-{{ product.handle }}" type="text" name="properties[Date]" size="12" 
           class="datepicker bta required bta-load-enable bta-dp-start" disabled="disabled"
           data-handle="{{ product.handle }}" data-variant="{{ product.selected_or_first_available_variant.id }}"
           data-bta-update-finish-date="true"
           data-bta-product-config="{{ product.metafields.bookthatapp.config }}"
           data-bta-variant-config="{% for variant in product.variants %}{{ variant.id }}:{{ variant.metafields.bookthatapp.config }}{% unless forloop.last %},{% endunless %}{% endfor %}" />

    {% capture attribute %}booking-finish{% endcapture %}
    <label for="{{ attribute }}-{{ product.handle }}">Return date</label>
    <input id="{{ attribute }}-{{ product.handle }}" type="text" name="properties[Return]" 
           class="bta bta-range-finish"
           readonly="readonly" />
    {% comment %}
    To just capture the return date (and not display it), use this instead:
    <input id="{{ attribute }}" type="hidden" name="properties[Return]" class="bta bta-range-finish" />
    {% endcomment %}

    <div class="bta-validation-messages" style="display:none">
      <p class="bta-validation-date-missing">Please select a date</p>
    </div>
</div>

<script>
  var bta = {
    productId: {{ product.id }}
  }
</script>
{% assign bta_configured = true %}
{% endif %}