This article will describe how to change the format of the time on the Product and Cart pages.

Product Page

TimePicker

If you are using a timepicker (Forms 3, 4 and 6) you can specify the time format by adding 'data-bta-timeformat' to the timepicker in the booking-form.liquid snippet. 

For example:

<select id="{{ attribute }}" name="properties[Time]" 
  class="bta-opening-hours bta-load-enable" 
  data-datepicker="booking-start" data-prompt="Choose a date...">
  <option class="loading">Loading...</option>
</select>

Becomes:

<select id="{{ attribute }}" name="properties[Time]" 
  class="bta-opening-hours bta-load-enable" 
  data-datepicker="booking-start" data-prompt="Choose a date..."
  data-bta-timeformat='hh:mm a'>
  <option class="loading">Loading...</option>
</select>

To change to a 24 hour clock (Military time) please change data-bta-timeformat='hh:mm a' to data-bta-timeformat='HH:mm'>

Upcoming Events

When using the upcoming events widget the timeformat is added to the table:

<table id="events" class="bta-upcoming-events-table" style="width:100%" 
  data-bta-max-events="5" 
  data-variant="{{ product.variants.first.id }}"
  data-handle="{{ product.handle }}"
  data-bta-timeformat='hh:mm a'>
 <tr><td colspan="3" class="loading">Loading...</td></tr>
 </table>

Cart Page

On the cart page (templates/cart.liquid or sections/cart-template.liquid) the time is shown as a line item property like this:

{% assign property_size = item.properties | size %}
{% if property_size > 0 %}
  {% for p in item.properties %}
    {% unless p.last == blank %}
      {{ p.first }}:
      {% if p.last contains '/uploads/' %}
        <a class="lightbox" href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
      {% else %}
        {{ p.last }}
      {% endif %}
      <br>
    {% endunless %}
  {% endfor %}
{% endif %}

To specify the format for the time, change where it says:

{{ p.last }}

to either this (if you are using Form 3, 4 or 6):

{% if p.first == 'Time' %}{{ p.last | date: '%-I:%M %p' }}{% else %}{{ p.last }}{% endif %}

or this if you are using the upcoming events booking form (Form 5) or the Course Widget:

{% if p.first == 'Date' %}{{ p.last | date: '%m/%d/%y %-I:%M %p' }}{% else %}{{ p.last }}{% endif %}

To change to a 24 hour clock (Military time) please change date: '%m/%d/%y %-I:%M %p' to  '%m/%d/%y %H:%M %p'>

For more details please see the documentation for the Product Page under the Developer Guide in BookThatApp.