Convert time format to AM/PM.

src/assets/js/backend_calendar_appointments_modal.js

@@ -389,6 +389,7 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
 
         $dialog.find('#start-datetime').datetimepicker({
             dateFormat: dateFormat,
+            timeFormat: 'h:mm TT',
 
             // Translation
             dayNames: [EALang.sunday, EALang.monday, EALang.tuesday, EALang.wednesday,
@@ -418,6 +419,7 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
 
         $dialog.find('#end-datetime').datetimepicker({
             dateFormat: dateFormat,
+            timeFormat: 'h:mm TT',
 
             // Translation
             dayNames: [EALang.sunday, EALang.monday, EALang.tuesday, EALang.wednesday,

src/assets/js/backend_calendar_default_view.js

@@ -1052,7 +1052,8 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
             editable: true,
             firstDay: 1, // Monday
             snapDuration: '00:15:00',
-            timeFormat: 'HH:mm',
+            timeFormat: 'h:mm A',
+            slotLabelFormat : 'h(:mm) A',
             allDayText: EALang.all_day,
             columnFormat: columnFormat,
             titleFormat: 'MMMM YYYY',

src/assets/js/backend_calendar_table_view.js

@@ -686,7 +686,7 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
 
             $event.html(            
                 appointment.customer.first_name.charAt(0) + '. ' + appointment.customer.last_name +
-                ' <span class="hour">' + startDate.toString('HH:mm') + '</span> '
+                ' <span class="hour">' + startDate.toString('h:mm tt') + '</span> '
                 + (eventDuration !== parseInt(appointment.service.duration) ? '(' + eventDuration + '\')' : '') 
             );
 
@@ -708,7 +708,7 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
                     $event.appendTo($(tr).prev().find('td').eq(cellIndex));
 
                     // Remove the hour from the event if it is the same as the row. 
-                    if (eventDate.toString('HH:mm') === $(tr).prev().find('td').eq(0).text()) {
+                    if (eventDate.toString('h:mm tt') === $(tr).prev().find('td').eq(0).text()) {
                         $event.find('.hour').remove();
                     }
 
@@ -747,7 +747,7 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
             var $event = $('<div class="event unavailability" />'); 
 
             $event.html((unavailability.notes || EALang.unavailable) +
-                ' <span class="hour">' + eventDate.toString('HH:mm') + '</span> (' + eventDuration + '\')');
+                ' <span class="hour">' + eventDate.toString('h:mm tt') + '</span> (' + eventDuration + '\')');
 
             $event.data(unavailability);
 
@@ -763,7 +763,7 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
                     $event.appendTo($(tr).prev().find('td').eq(1));
 
                     // Remove the hour from the event if it is the same as the row. 
-                    if (eventDate.toString('HH:mm') === $(tr).prev().find('td').eq(0).text()) {
+                    if (eventDate.toString('h:mm tt') === $(tr).prev().find('td').eq(0).text()) {
                         $event.find('.hour').remove();
                     }
 
@@ -798,7 +798,7 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
 
             $event.html(
                 EALang.break +
-                ' <span class="hour">' + eventDate.toString('HH:mm') + '</span> (' + eventDuration + '\')');
+                ' <span class="hour">' + eventDate.toString('h:mm tt') + '</span> (' + eventDuration + '\')');
 
             $event.data(entry);
 
@@ -812,7 +812,7 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
 
                 if (eventDate < cellDate) {
                     // Remove the hour from the event if it is the same as the row. 
-                    if (eventDate.toString('HH:mm') === $(tr).prev().find('td').eq(0).text()) {
+                    if (eventDate.toString('h:mm tt') === $(tr).prev().find('td').eq(0).text()) {
                         $event.find('.hour').remove();
                     }
 

src/assets/js/backend_calendar_unavailabilities_modal.js

@@ -179,6 +179,7 @@ window.BackendCalendarUnavailabilitiesModal = window.BackendCalendarUnavailabili
 
         $dialog.find('#unavailable-start').datetimepicker({
             dateFormat: dateFormat,
+            timeFormat: 'h:mm TT',
 
             // Translation
             dayNames: [EALang.sunday, EALang.monday, EALang.tuesday, EALang.wednesday,
@@ -208,6 +209,7 @@ window.BackendCalendarUnavailabilitiesModal = window.BackendCalendarUnavailabili
 
         $dialog.find('#unavailable-end').datetimepicker({
             dateFormat: dateFormat,
+            timeFormat: 'h:mm TT',
 
             // Translation
             dayNames: [EALang.sunday, EALang.monday, EALang.tuesday, EALang.wednesday,
@@ -237,7 +239,7 @@ window.BackendCalendarUnavailabilitiesModal = window.BackendCalendarUnavailabili
 
         // Clear the unavailable notes field.
         $dialog.find('#unavailable-notes').val('');
-    }
+    };
 
     exports.initialize = function() {
         var $unavailabilityProvider = $('#unavailable-provider'); 

src/assets/js/frontend_book.js

@@ -380,6 +380,10 @@ window.FrontendBook = window.FrontendBook || {};
      * customer settings and input for the appointment booking.
      */
     exports.updateConfirmFrame = function() {
+        if ($('.selected-hour').text() === '') {
+            return;
+        }
+
         // Appointment Details
         var selectedDate = $('#select-date').datepicker('getDate');
 
@@ -452,7 +456,7 @@ window.FrontendBook = window.FrontendBook || {};
 
         postData['appointment'] = {
             start_datetime: $('#select-date').datepicker('getDate').toString('yyyy-MM-dd')
-                                    + ' ' + $('.selected-hour').text() + ':00',
+                                    + ' ' + Date.parse($('.selected-hour').text()).toString('HH:mm') + ':00',
             end_datetime: _calcEndDatetime(),
             notes: $('#notes').val(),
             is_unavailable: false,
@@ -489,7 +493,7 @@ window.FrontendBook = window.FrontendBook || {};
 
         // Add the duration to the start datetime.
         var startDatetime = $('#select-date').datepicker('getDate').toString('dd-MM-yyyy')
-                + ' ' + $('.selected-hour').text();
+                + ' ' + Date.parse($('.selected-hour').text()).toString('HH:mm');
         startDatetime = Date.parseExact(startDatetime, 'dd-MM-yyyy HH:mm');
         var endDatetime = undefined;
 

src/assets/js/frontend_book_api.js

@@ -69,16 +69,16 @@ window.FrontendBookApi = window.FrontendBookApi || {};
             // service. Fill the available hours div with response data.
             if (response.length > 0) {
                 var currColumn = 1;
-                $('#available-hours').html('<div style="width:50px; float:left;"></div>');
+                $('#available-hours').html('<div style="width:80px; float:left;"></div>');
 
                 $.each(response, function(index, availableHour) {
                     if ((currColumn * 10) < (index + 1)) {
                         currColumn++;
-                        $('#available-hours').append('<div style="width:50px; float:left;"></div>');
+                        $('#available-hours').append('<div style="width:80px; float:left;"></div>');
                     }
 
                     $('#available-hours div:eq(' + (currColumn - 1) + ')').append(
-                            '<span class="available-hour">' + availableHour + '</span><br/>');
+                            '<span class="available-hour">' + Date.parse(availableHour).toString('h:mm tt') + '</span><br/>');
                 });
 
                 if (FrontendBook.manageMode) {
@@ -87,7 +87,7 @@ window.FrontendBookApi = window.FrontendBookApi || {};
                     $('.available-hour').filter(function() {
                         return $(this).text() === Date.parseExact(
                                 GlobalVariables.appointmentData['start_datetime'],
-                                'yyyy-MM-dd HH:mm:ss').toString('HH:mm');
+                                'yyyy-MM-dd HH:mm:ss').toString('h:mm tt');
                     }).addClass('selected-hour');
                 } else {
                     // Set the first available hour as the default selection.

src/assets/js/general_functions.js

@@ -405,7 +405,7 @@ window.GeneralFunctions = window.GeneralFunctions || {};
      */
     exports.formatDate = function(date, dateFormatSetting, addHours) {
         var format, result;
-        var hours = addHours ? ' HH:mm' : '';
+        var hours = addHours ? ' h:mm tt' : '';
 
         switch(dateFormatSetting) {
             case 'DMY':

src/assets/js/working_plan.js

@@ -234,6 +234,7 @@
             // Make all cells in current row editable.
             $(this).parent().parent().children().trigger('edit');
             $(this).parent().parent().find('.break-start input, .break-end input').timepicker({
+                timeFormat: 'h:mm TT',
                 currentText: EALang.now,
                 closeText: EALang.close,
                 timeOnlyTitle: EALang.select_time,
@@ -294,7 +295,7 @@
                 end = Date.parse($modifiedRow.find('.break-end input').val());
 
             if (start > end) {
-                $modifiedRow.find('.break-end input').val(start.addHours(1).toString('HH:mm'));
+                $modifiedRow.find('.break-end input').val(start.addHours(1).toString('h:mm tt'));
             }
 
             this.enableSubmit = true;
@@ -358,8 +359,7 @@
         if (disabled == false) {
             // Set timepickers where needed.
             $('.working-plan input:text').timepicker({
-                timeFormat: 'HH:mm',
+                timeFormat: 'h:mm TT',
-
                 currentText: EALang.now,
                 closeText: EALang.close,
                 timeOnlyTitle: EALang.select_time,
@@ -373,7 +373,7 @@
                         end = Date.parse($(this).parent().parent().find('.work-end').val());
 
                     if (start > end) {
-                        $(this).parent().parent().find('.work-end').val(start.addHours(1).toString('HH:mm'));
+                        $(this).parent().parent().find('.work-end').val(start.addHours(1).toString('h:mm tt'));
                     }
                 }
             });

src/engine/Notifications/Email.php

@@ -123,8 +123,8 @@ class Email {
             '$email_message' => $message->get(),
             '$appointment_service' => $service['name'],
             '$appointment_provider' => $provider['first_name'] . ' ' . $provider['last_name'],
-            '$appointment_start_date' => date($date_format . ' H:i', strtotime($appointment['start_datetime'])),
+            '$appointment_start_date' => date($date_format . ' g:i A', strtotime($appointment['start_datetime'])),
-            '$appointment_end_date' => date($date_format . ' H:i', strtotime($appointment['end_datetime'])),
+            '$appointment_end_date' => date($date_format . ' g:i A', strtotime($appointment['end_datetime'])),
             '$appointment_link' => $appointmentLink->get(),
             '$company_link' => $company['company_link'],
             '$company_name' => $company['company_name'],
@@ -213,7 +213,7 @@ class Email {
             '$email_message' => $this->framework->lang->line('appointment_removed_from_schedule'),
             '$appointment_service' => $service['name'],
             '$appointment_provider' => $provider['first_name'] . ' ' . $provider['last_name'],
-            '$appointment_date' => date($date_format . ' H:i', strtotime($appointment['start_datetime'])),
+            '$appointment_date' => date($date_format . ' g:i A', strtotime($appointment['start_datetime'])),
             '$appointment_duration' => $service['duration'] . ' minutes',
             '$company_link' => $company['company_link'],
             '$company_name' => $company['company_name'],