This article will describe how to change the format of the time on the Product and Cart pages while using the Booking Form Time picker.

For the widgets, the Time Format options will be present in the app under Widgets-> select the Widget to adjust the time format-> under Time, select a Time format option.

 

Note: Widgets are our newest type of booking form. We highly recommend using a widget over a classic form. Besides requiring no coding changes and having a more modern look that flows better with the theme, the widgets have more settings and greater app performance in comparison to the classic forms. Since the widgets require no coding changes you can easily have many different types of widgets in your store to handle all types of booking scenarios. 

 

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.