From e7b9b80264e67e6aea8e6413e482da30371ab5fb Mon Sep 17 00:00:00 2001 From: Alex Tselegidis Date: Fri, 11 Dec 2015 00:04:40 +0100 Subject: [PATCH] Added dynamic date formats to backend/calendar page (not finished yet). --- src/assets/js/backend_calendar.js | 61 +++++++++++++++++++----------- src/assets/js/general_functions.js | 16 ++++---- 2 files changed, 47 insertions(+), 30 deletions(-) diff --git a/src/assets/js/backend_calendar.js b/src/assets/js/backend_calendar.js index b5fb8970..39801705 100644 --- a/src/assets/js/backend_calendar.js +++ b/src/assets/js/backend_calendar.js @@ -203,12 +203,12 @@ var BackendCalendar = { // Set the start and end datetime of the appointment. var startDatetime = Date.parseExact(appointment['start_datetime'], - 'yyyy-MM-dd HH:mm:ss').toString('dd/MM/yyyy HH:mm'); - $dialog.find('#start-datetime').val(startDatetime); + 'yyyy-MM-dd HH:mm:ss'); + $dialog.find('#start-datetime').val(GeneralFunctions.formatDate(startDatetime, GlobalVariables.dateFormat, true)); var endDatetime = Date.parseExact(appointment['end_datetime'], - 'yyyy-MM-dd HH:mm:ss').toString('dd/MM/yyyy HH:mm'); - $dialog.find('#end-datetime').val(endDatetime); + 'yyyy-MM-dd HH:mm:ss'); + $dialog.find('#end-datetime').val(GeneralFunctions.formatDate(endDatetime, GlobalVariables.dateFormat, true)); var customer = appointment['customer']; $dialog.find('#customer-id').val(appointment['id_users_customer']); @@ -275,8 +275,7 @@ var BackendCalendar = { $('#calendar').fullCalendar('getView').visStart, $('#calendar').fullCalendar('getView').visEnd); - // If current value is service, then the sync buttons must be - // disabled. + // If current value is service, then the sync buttons must be disabled. if ($('#select-filter-item option:selected').attr('type') === BackendCalendar.FILTER_TYPE_SERVICE) { $('#google-sync, #enable-sync, #insert-appointment, #insert-unavailable') @@ -382,12 +381,12 @@ var BackendCalendar = { // Set the start and end datetime of the appointment. var startDatetime = Date.parseExact(appointment['start_datetime'], - 'yyyy-MM-dd HH:mm:ss').toString('dd/MM/yyyy HH:mm'); - $dialog.find('#start-datetime').val(startDatetime); + 'yyyy-MM-dd HH:mm:ss'); + $dialog.find('#start-datetime').val(GeneralFunctions.formatDate(startDatetime, GlobalVariables.dateFormat, true)); var endDatetime = Date.parseExact(appointment['end_datetime'], - 'yyyy-MM-dd HH:mm:ss').toString('dd/MM/yyyy HH:mm'); - $dialog.find('#end-datetime').val(endDatetime); + 'yyyy-MM-dd HH:mm:ss'); + $dialog.find('#end-datetime').val(GeneralFunctions.formatDate(endDatetime, GlobalVariables.dateFormat, true)); var customer = appointment['customer']; $dialog.find('#customer-id').val(appointment['id_users_customer']); @@ -538,9 +537,9 @@ var BackendCalendar = { // Id must exist on the object in order for the model to update // the record and not to perform an insert operation. - var startDatetime = Date.parseExact($dialog.find('#start-datetime').val(), + var startDatetime = Date.parse($dialog.find('#start-datetime').val(), 'dd/MM/yyyy HH:mm').toString('yyyy-MM-dd HH:mm:ss'); - var endDatetime = Date.parseExact($dialog.find('#end-datetime').val(), + var endDatetime = Date.parse($dialog.find('#end-datetime').val(), 'dd/MM/yyyy HH:mm').toString('yyyy-MM-dd HH:mm:ss'); var appointment = { @@ -836,8 +835,9 @@ var BackendCalendar = { else start.addHours(1).set({ 'minute': 0 }); - $dialog.find('#start-datetime').val(start.toString('dd/MM/yyyy HH:mm')); - $dialog.find('#end-datetime').val(start.addMinutes(serviceDuration).toString('dd/MM/yyyy HH:mm')); + $dialog.find('#start-datetime').val(GeneralFunctions.formatDate(start, GlobalVariables.dateFormat, true)); + $dialog.find('#end-datetime').val(GeneralFunctions.formatDate(start.addMinutes(serviceDuration), + GlobalVariables.dateFormat, true)); // Display modal form. $dialog.find('.modal-header h3').text(EALang['new_appointment_title']); @@ -1910,13 +1910,28 @@ var BackendCalendar = { } }); - var startDatetime = new Date().addMinutes(GlobalVariables.bookAdvanceTimeout) - .toString('dd/MM/yyyy HH:mm'); + var startDatetime = new Date().addMinutes(GlobalVariables.bookAdvanceTimeout), + formattedStartDatetime = GeneralFunctions.formatDate(startDatetime, GlobalVariables.dateFormat, true); var endDatetime = new Date().addMinutes(GlobalVariables.bookAdvanceTimeout) - .addMinutes(serviceDuration).toString('dd/MM/yyyy HH:mm'); + .addMinutes(serviceDuration), + formattedEndDatetime = GeneralFunctions.formatDate(endDatetime, GlobalVariables.dateFormat, true); + + var dateFormat; + + switch(GlobalVariables.dateFormat) { + case 'DMY': + dateFormat = 'dd/mm/yy'; + break; + case 'MDY': + dateFormat = 'mm/dd/yy'; + break; + case 'YMD': + dateFormat = 'yy/mm/dd'; + break; + } $dialog.find('#start-datetime').datetimepicker({ - 'dateFormat': 'dd/mm/yy', + 'dateFormat': dateFormat, // Translation dayNames: [EALang['sunday'], EALang['monday'], EALang['tuesday'], EALang['wednesday'], EALang['thursday'], EALang['friday'], EALang['saturday']], @@ -1941,10 +1956,10 @@ var BackendCalendar = { minuteText: EALang['minutes'], firstDay: 1 }); - $dialog.find('#start-datetime').val(startDatetime); + $dialog.find('#start-datetime').val(formattedStartDatetime); $dialog.find('#end-datetime').datetimepicker({ - 'dateFormat': 'dd/mm/yy', + 'dateFormat': dateFormat, // Translation dayNames: [EALang['sunday'], EALang['monday'], EALang['tuesday'], EALang['wednesday'], EALang['thursday'], EALang['friday'], EALang['saturday']], @@ -1969,7 +1984,7 @@ var BackendCalendar = { minuteText: EALang['minutes'], firstDay: 1 }); - $dialog.find('#end-datetime').val(endDatetime); + $dialog.find('#end-datetime').val(formattedEndDatetime); }, /** @@ -2005,8 +2020,8 @@ var BackendCalendar = { } // :: CHECK APPOINTMENT START AND END TIME - var start = Date.parseExact($('#start-datetime').val(), 'dd/MM/yyyy HH:mm'); - var end = Date.parseExact($('#end-datetime').val(), 'dd/MM/yyyy HH:mm'); + var start = Date.parse($('#start-datetime').val(), 'dd/MM/yyyy HH:mm'); + var end = Date.parse($('#end-datetime').val(), 'dd/MM/yyyy HH:mm'); if (start > end) { $dialog.find('#start-datetime').parents().eq(1).addClass('error'); $dialog.find('#end-datetime').parents().eq(1).addClass('error'); diff --git a/src/assets/js/general_functions.js b/src/assets/js/general_functions.js index 241aa3e7..ae5b4aa2 100644 --- a/src/assets/js/general_functions.js +++ b/src/assets/js/general_functions.js @@ -369,23 +369,25 @@ var GeneralFunctions = { /** * Format a given date according to the date format setting. * - * @param {Date]} date The date to be formatted. - * @param {string} dateFormatSetting The setting provided by PHP must be one of + * @param {Date]} date The date to be formatted. + * @param {string} dateFormatSetting The setting provided by PHP must be one of * the "DMY", "MDY" or "YMD". + * @param {bool} addHours (optional) Whether to add hours to the result. * @returns {string} Returns the formatted date string. */ - formatDate: function(date, dateFormatSetting) { - var result; + formatDate: function(date, dateFormatSetting, addHours) { + var format, result, + hours = addHours ? ' HH:mm' : ''; switch(dateFormatSetting) { case 'DMY': - result = Date.parse(date).toString('dd/MM/yyyy'); + result = Date.parse(date).toString('dd/MM/yyyy' + hours); break; case 'MDY': - result = Date.parse(date).toString('MM/dd/yyyy'); + result = Date.parse(date).toString('MM/dd/yyyy' + hours); break; case 'YMD': - result = Date.parse(date).toString('yyyy/MM/dd'); + result = Date.parse(date).toString('yyyy/MM/dd' + hours); break; default: throw new Error('Invalid date format setting provided!', dateFormatSetting);