TimePicker and DatePicker examples

As of version 5.1.7, the way DatePickers and TimePickers are generated have changed slightly, so that there is a standard and unobtrusive way to create one of these html input elements.

The advantage of this is that you can now reuse datepickers accross the site using one piece of reuseable code.

This is particularly relevant to those of you that have modified your template files, because we now rely on classes rather than IDs to determine which elements need converting. Whilst we have added some fallback methods to add these classes dynamically to elements with the original IDs, it’s strongly recommended you change your template, as it’s a very quick job and simply involves adding some classes to a few elements.

Here’s a list of the files that apply:

  • /templates/forms/event/bookings.php
  • /templates/forms/event/recurring-when.php
  • /templates/forms/event/when-with-recurring.php
  • /templates/forms/event/when.php
  • /templates/forms/ticket-form.php
  • /templates/forms/tickets-form.php
  • /templates/placeholders/bookingform.php
  • /templates/templates/events-search.php

DatePicker Examples

DatePickers have one interesting nuance worth remembering, and this is the AltField feature, which allows dates to be displayed in a localized format whilst the real value is stored in a hidden field. For this reason, you end up with two input fields per datepicker.

In all cases, a datepicker input element must contain the em-date-input-loc class and the hidden input element must have the em-date-input class

DatePicker Date Range

Date ranges must be wrapped in an element of class em-time-range. The starting and ending input elements (i.e. the ones with em-date-input-loc classes) must have a em-date-start and em-date-end class respectively so that they interact with each other.

<div class="em-date-range">From
 <input class="em-date-input-loc em-date-start" type="text" name="ticket_start_pub" />
 <input class="em-date-input" type="hidden" name="ticket_start" />
 <input class="em-date-input-loc em-date-end" type="text" name="ticket_end_pub" />
 <input class="em-date-input" type="hidden" name="ticket_end" /></div>


DatePicker Single Date

Date ranges must be wrapped in an element of class em-time-single. Note that in all these cases, any valid element will do, it doesn’t have to be a div.

<span class="em-date-single">
 <input class="em-date-input-loc" type="text" name="test" />
 <input class="em-date-input" type="hidden" name="test" />

Pick a date

TimePicker Examples

The way timepickers are set up is much like for dates. The main difference is that hidden localization fields aren’t required, so you’ll have one input element per time, which must contain the em-time-input class.

TimePicker Time Range

Wrap your input fields with an element of class em-time-range. You also need to add em-time-start and em-time-end classes to your start and end time input elements respectively.

You’ll also notice an All Day element. This is optional, but if you include it and ensure the class name em-time-all-day is present when clicked it will grey out the start/end times.

<p class="em-time-range">
	Starting from
	<input class="em-time-input em-time-start" type="text" name="event_start_time" />
	<input class="em-time-input em-time-end" type="text" name="event_end_time" />
	All Day <input class="em-time-all-day" type="checkbox" name="event_all_day" value="1" />

Starting from


All Day

TimePicker Single Time

If you wrap your input field with any element containing the em-time-single, the element will be converted to a timepicker.

Time : <input class="em-time-input em-time-start" type="text" name="event_start_time" value="12:00 AM" />

Time :