Inline Date Picker

An inline date picker means that the booking calendar is already open when the screen loads. This article will walk you through the quick and easy process of adjusting the standard configuration. 

1. In Shopify Admin, open your current theme.

2. Open the booking-form.liquid file under the Snippets area of your Theme Editor.

3. Locate the code for the booking form you want to adjust. For this example we are changing the 'Date' form located in booking form 4. 

It should look like the below block of code:

....
 <div>
  {% capture attribute %}booking-start{% endcapture %}
  <label for="{{ attribute }}-{{ product.handle }}">Date:</label>
  <input id="{{ attribute }}-{{ product.handle }}" type="text" name="properties[Date]"
         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-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 %}"
         placeholder="Select date..." />
....

4. Now paste bta-inline-datepicker within the form's class list. It should now look as shown below:

....
 <div>
  {% capture attribute %}booking-start{% endcapture %}
  <label for="{{ attribute }}-{{ product.handle }}">Date:</label>
  <input id="{{ attribute }}-{{ product.handle }}" type="text" name="properties[Date]"
         class="datepicker bta required bta-load-enable bta-dp-start bta-inline-datepicker" disabled="disabled"
         data-handle="{{ product.handle }}" data-variant="{{ product.selected_or_first_available_variant.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 %}"
         placeholder="Select date..." />
....

5. Click Save

If you have any questions or the booking form is not displaying correctly, please create a ticket and we'll be happy to help.