Reset button for date range

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 %}
{% unless bta_configured %}
<div class="booking-form clearfix">
    <div class="selector-wrapper">
        {% capture attribute %}booking-start{% endcapture %}
        <label for="{{ attribute }}">From:</label>
        <input id="{{ attribute }}" type="text" name="properties[{{ attribute }}]" size="12" class="datepicker bta required bta-load-enable bta-range-start" data-handle="{{ product.handle }}" data-variant="{{ product.variants.first.id}}" 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 %}" data-bta-range-partner-id="#booking-finish" data-bta-range-days-max="14" data-bta-range-days-min="1" disabled="disabled" />
    </div>
    <div class="selector-wrapper">
        {% capture attribute %}booking-finish{% endcapture %}
        <label for="{{ attribute }}">To:</label>
        <input id="{{ attribute }}" type="text" name="properties[{{ attribute }}]" size="12" class="datepicker bta required bta-load-enable bta-range-finish" data-handle="{{ product.handle }}" data-variant="{{ product.variants.first.id}}" data-bta-range-partner-id="#booking-start" data-bta-range-days-max="14" data-bta-range-days-min="1" disabled="disabled" />
    </div>
    <div class="selector-wrapper">
      <button id="bta-reset" disabled="disabled">Reset</button>
    </div>
</div>

<script>
var bta = {
    productId: {{ product.id }}
}

$('#bta-reset').click(function(e) {
  e.preventDefault();
  
  var form = $('form[action="/cart/add"]').data('bta.bookingForm');
  form.reset();
  
  return false;
});

$('form[action="/cart/add"]').on('bta.datetimeChange', function(event, form) {
  if (form.getStartDate() && form.getFinishDate()) {
    $('#bta-reset').removeAttr('disabled');
  } else {
    $('#bta-reset').attr('disabled', 'disabled');
  }
});

</script>
{% assign bta_configured = true %}
{% endunless %}
{% endif %}