Show a return date based on duration.

booking-form.snippet.html

To show a return date based on duration make the following changes in the booking-form snippet.

1. Add data-bta-update-finish-date="true" to the datepicker:

  <div>
    {% capture attribute %}booking-start{% endcapture %}
    <label for="{{ attribute }}-{{ product.handle }}">Rental Date</label>
    <input id="{{ attribute }}-{{ product.handle }}" type="text" name="properties[Date]" size="12" 
           class="datepicker bta required bta-load-enable bta-dp-start bta-highlight-duration" 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 %}" />
  </div>

2. Make the finish field read only:  

  <div>
    {% 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" />
  </div>

3. (Optional) To show a summary instead of a read only field you can use a hidden field and some JS to populate a <p> element:
  
  {% capture attribute %}booking-finish{% endcapture %}
  <input id="{{ attribute }}-{{ product.handle }}" type="hidden" class="bta datepicker bta-range-finish" name="properties[Return]" />

  <p id='booking-summary' style='display:none'></p>

  <script>
  $('form[action="/cart/add"]').on('bta.datetimeChange', function(event, form) {
    var start = moment(form.getStartDate()), 
        finish = moment(form.getFinishDate());

    if (start && finish) {
      $('#booking-summary').show().text(start.format('dddd, DD/MM/YYYY') + ' - ' + finish.format('dddd, DD/MM/YYYY'));
    } else {
      $('#booking-summary').hide().text('');
    }
  });
  </script>

4. (Optional) Add a calendar icon in the date picker - theme.scss.liquid

  /* BookThatApp */
  .booking-form {
    input.datepicker {
      padding-right: 28px;
    }

    input.datepicker.bta-loaded {
      background: {
        image: url('{{ "calendar.png" | asset_url }}');
        repeat: no-repeat;
        position: right 10px center;
      }
    }
  }