Capture a date range on the cart page and update quantities

cart-booking-form.liquid.html

{{ 'jquery.validate.min.js' | asset_url | script_tag }}
<div class="selector-wrapper">
    {% capture attribute %}booking-start{% endcapture %}
    <label for="{{ attribute }}">From:</label>
    <input id="{{ attribute }}" type="text" name="attributes[{{ attribute }}]" size="12" class="datepicker bta required bta-load-enable" value="{{ cart.attributes.booking-start }}" />
</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" value="{{ cart.attributes.booking-finish }}"  />
</div>

<script>
  function updateQuantity() {
    var start = $('#booking-start').datepicker('getDate'),
        finish  = $('#booking-finish').datepicker('getDate');
    
    if (start && finish) {
      var days = bta.dayDelta(start, finish);
      $('form[action="/cart"] input[name="updates[]"]').val(days);
    }
  }
  
  var bta = {
    callbacks: {
      loaded: function() {
        var onStartSelect = $('#booking-start').datepicker('option', 'onSelect'),
            onFinishSelect = $('#booking-finish').datepicker('option', 'onSelect');
        
        $('#booking-start').datepicker('option', 'onSelect', function(date) {
          onStartSelect.call(this, date);
          updateQuantity();
        });
        
        $('#booking-finish').datepicker('option', 'onSelect', function(date) {
          onFinishSelect.call(this, date);
          updateQuantity();
        });
      },
      available: function(data) {
        //        $('.bta.hasDatepicker').removeClass('loading');
      }
    }
  }
  
  $(document).ready(function() {
    $('form[action="/cart"]').validate();
  })
</script>