From cd768bda8541fb0eb926112d0b1d9627a33d4779 Mon Sep 17 00:00:00 2001 From: Alex Tselegidis Date: Sat, 6 Jan 2024 11:06:48 +0100 Subject: [PATCH] Use the helper methods to set and get date time picker values --- assets/js/components/appointments_modal.js | 34 ++++++++++++------- .../js/components/unavailabilities_modal.js | 20 ++++++----- .../working_plan_exceptions_modal.js | 28 +++++++-------- assets/js/http/booking_http_client.js | 4 +-- assets/js/pages/booking.js | 16 ++++----- assets/js/utils/calendar_default_view.js | 32 +++++++++++------ assets/js/utils/calendar_table_view.js | 32 +++++++++-------- assets/js/utils/working_plan.js | 6 ++-- 8 files changed, 99 insertions(+), 73 deletions(-) diff --git a/assets/js/components/appointments_modal.js b/assets/js/components/appointments_modal.js index 4038810d..b7ed915f 100755 --- a/assets/js/components/appointments_modal.js +++ b/assets/js/components/appointments_modal.js @@ -52,6 +52,8 @@ App.Components.AppointmentsModal = (function () { const $customField4 = $('#custom-field-4'); const $customField5 = $('#custom-field-5'); + const moment = window.moment; + /** * Update the displayed timezone. */ @@ -85,8 +87,11 @@ App.Components.AppointmentsModal = (function () { // ID must exist on the object in order for the model to update the record and not to perform // an insert operation. - const startDatetime = moment($startDatetime[0]._flatpickr.selectedDates[0]).format('YYYY-MM-DD HH:mm:ss'); - const endDatetime = moment($endDatetime[0]._flatpickr.selectedDates[0]).format('YYYY-MM-DD HH:mm:ss'); + const startDateTimeObject = App.Utils.UI.getDateTimePickerValue($startDatetime); + const startDatetime = moment(startDateTimeObject).format('YYYY-MM-DD HH:mm:ss'); + + const endDateTimeObject = App.Utils.UI.getDateTimePickerValue($endDatetime); + const endDatetime = moment(endDateTimeObject).format('YYYY-MM-DD HH:mm:ss'); const appointment = { id_services: $selectService.val(), @@ -204,8 +209,8 @@ App.Components.AppointmentsModal = (function () { startMoment.add(1, 'hour').set({minutes: 0}); } - $startDatetime[0]._flatpickr.setDate(startMoment.toDate()); - $endDatetime[0]._flatpickr.setDate(startMoment.add(duration, 'minutes').toDate()); + App.Utils.UI.setDateTimePickerValue($startDatetime, startMoment.toDate()); + App.Utils.UI.setDateTimePickerValue($endDatetime, startMoment.add(duration, 'minutes').toDate()); // Display modal form. $appointmentsModal.find('.modal-header h3').text(lang('new_appointment_title')); @@ -362,8 +367,9 @@ App.Components.AppointmentsModal = (function () { const duration = service ? service.duration : 60; - const start = $startDatetime[0]._flatpickr.selectedDates[0]; - $endDatetime[0]._flatpickr.setDate(new Date(start.getTime() + duration * 60000)); + const startDateTimeObject = App.Utils.UI.getDateTimePickerValue($startDatetime); + const endDateTimeObject = new Date(startDateTimeObject.getTime() + duration * 60000); + App.Utils.UI.setDateTimePickerValue($endDatetime, endDateTimeObject); // Update the providers select box. @@ -490,15 +496,16 @@ App.Components.AppointmentsModal = (function () { (availableService) => Number(availableService.id) === Number(serviceId), ); - const start = $startDatetime[0]._flatpickr.selectedDates[0]; - $endDatetime[0]._flatpickr.setDate(new Date(start.getTime() + service.duration * 60000)); + const startDateTimeObject = App.Utils.UI.getDateTimePickerValue($startDatetime); + const endDateTimeObject = new Date(startDateTimeObject.getTime() + service.duration * 60000); + App.Utils.UI.setDateTimePickerValue($endDatetime, endDateTimeObject); }, }); - $startDatetime[0]._flatpickr.setDate(startDatetime); + App.Utils.UI.setDateTimePickerValue($startDatetime, startDatetime); App.Utils.UI.initializeDateTimePicker($endDatetime); - $endDatetime[0]._flatpickr.setDate(endDatetime); + App.Utils.UI.setDateTimePickerValue($endDatetime, endDatetime); } /** @@ -538,9 +545,10 @@ App.Components.AppointmentsModal = (function () { } // Check appointment start and end time. - const start = $startDatetime[0]._flatpickr.selectedDates[0]; - const end = $endDatetime[0]._flatpickr.selectedDates[0]; - if (start > end) { + const startDateTimeObject = App.Utils.UI.getDateTimePickerValue($startDatetime); + const endDateTimeObject = App.Utils.UI.getDateTimePickerValue($endDatetime); + + if (startDateTimeObject > endDateTimeObject) { $startDatetime.addClass('is-invalid'); $endDatetime.addClass('is-invalid'); throw new Error(lang('start_date_before_end_error')); diff --git a/assets/js/components/unavailabilities_modal.js b/assets/js/components/unavailabilities_modal.js index 471d79ca..90efea94 100755 --- a/assets/js/components/unavailabilities_modal.js +++ b/assets/js/components/unavailabilities_modal.js @@ -28,6 +28,8 @@ App.Components.UnavailabilitiesModal = (function () { const $selectFilterItem = $('#select-filter-item'); const $reloadAppointments = $('#reload-appointments'); + const moment = window.moment; + /** * Update the displayed timezone. */ @@ -68,22 +70,22 @@ App.Components.UnavailabilitiesModal = (function () { return; } - const startMoment = moment($startDatetime[0]._flatpickr.selectedDates[0]); + const startDateTimeMoment = moment(App.Utils.UI.getDateTimePickerValue($startDatetime)); - if (!startMoment.isValid()) { + if (!startDateTimeMoment.isValid()) { $startDatetime.addClass('is-invalid'); return; } - const endMoment = moment($endDatetime[0]._flatpickr.selectedDates[0]); + const endDateTimeMoment = moment(App.Utils.UI.getDateTimePickerValue($endDatetime)); - if (!endMoment.isValid()) { + if (!endDateTimeMoment.isValid()) { $endDatetime.addClass('is-invalid'); return; } - if (startMoment.isAfter(endMoment)) { + if (startDateTimeMoment.isAfter(endDateTimeMoment)) { // Start time is after end time - display message to user. $unavailabilitiesModal .find('.modal-message') @@ -100,8 +102,8 @@ App.Components.UnavailabilitiesModal = (function () { // Unavailability period records go to the appointments table. const unavailability = { - start_datetime: startMoment.format('YYYY-MM-DD HH:mm:ss'), - end_datetime: endMoment.format('YYYY-MM-DD HH:mm:ss'), + start_datetime: startDateTimeMoment.format('YYYY-MM-DD HH:mm:ss'), + end_datetime: endDateTimeMoment.format('YYYY-MM-DD HH:mm:ss'), notes: $unavailabilitiesModal.find('#unavailability-notes').val(), id_users_provider: $selectProvider.val(), }; @@ -156,8 +158,8 @@ App.Components.UnavailabilitiesModal = (function () { $selectProvider.val($selectFilterItem.val()).closest('.form-group').hide(); } - $startDatetime[0]._flatpickr.setDate(startMoment.toDate()); - $endDatetime[0]._flatpickr.setDate(startMoment.add(1, 'hour').toDate()); + App.Utils.UI.setDateTimePickerValue($startDatetime, startMoment.toDate()); + App.Utils.UI.setDateTimePickerValue($endDatetime, startMoment.add(1, 'hour').toDate()); $dialog.find('.modal-header h3').text(lang('new_unavailability_title')); $dialog.modal('show'); diff --git a/assets/js/components/working_plan_exceptions_modal.js b/assets/js/components/working_plan_exceptions_modal.js index f1332e2d..bb3b6418 100644 --- a/assets/js/components/working_plan_exceptions_modal.js +++ b/assets/js/components/working_plan_exceptions_modal.js @@ -77,19 +77,19 @@ App.Components.WorkingPlanExceptionsModal = (function () { function validate() { $modal.find('.is-invalid').removeClass('is-invalid'); - const date = $date[0]._flatpickr.selectedDates[0]; + const date = App.Utils.UI.getDateTimePickerValue($date); if (!date) { $date.addClass('is-invalid'); } - const start = $start[0]._flatpickr.selectedDates[0]; + const start = App.Utils.UI.getDateTimePickerValue($start); if (!start) { $start.addClass('is-invalid'); } - const end = $end[0]._flatpickr.selectedDates[0]; + const end = App.Utils.UI.getDateTimePickerValue($end); if (!end) { $end.addClass('is-invalid'); @@ -157,15 +157,15 @@ App.Components.WorkingPlanExceptionsModal = (function () { return; } - const date = moment($date[0]._flatpickr.selectedDates[0]).format('YYYY-MM-DD'); + const date = moment(App.Utils.UI.getDateTimePickerValue($date)).format('YYYY-MM-DD'); const isNonWorkingDay = $isNonWorkingDay.prop('checked'); const workingPlanException = isNonWorkingDay ? null : { - start: moment($start[0]._flatpickr.selectedDates[0]).format('HH:mm'), - end: moment($end[0]._flatpickr.selectedDates[0]).format('HH:mm'), + start: moment(App.Utils.UI.getDateTimePickerValue($start)).format('HH:mm'), + end: moment(App.Utils.UI.getDateTimePickerValue($end)).format('HH:mm'), breaks: getBreaks(), }; @@ -223,9 +223,9 @@ App.Components.WorkingPlanExceptionsModal = (function () { function add() { deferred = $.Deferred(); - $date[0]._flatpickr.setDate(new Date()); - $start[0]._flatpickr.setDate(moment('08:00', 'HH:mm').toDate()); - $end[0]._flatpickr.setDate(moment('20:00', 'HH:mm').toDate()); + App.Utils.UI.setDateTimePickerValue($date, new Date()); + App.Utils.UI.setDateTimePickerValue($start, moment('08:00', 'HH:mm').toDate()); + App.Utils.UI.setDateTimePickerValue($end, moment('20:00', 'HH:mm').toDate()); $isNonWorkingDay.prop('checked', false); @@ -249,11 +249,11 @@ App.Components.WorkingPlanExceptionsModal = (function () { const isNonWorkingDay = !Boolean(workingPlanException); - $date[0]._flatpickr.setDate(moment(date, 'YYYY-MM-DD').toDate()); + App.Utils.UI.setDateTimePickerValue($date, moment(date, 'YYYY-MM-DD').toDate()); if (isNonWorkingDay === false) { - $start[0]._flatpickr.setDate(moment(workingPlanException.start, 'HH:mm').toDate()); - $end[0]._flatpickr.setDate(moment(workingPlanException.end, 'HH:mm').toDate()); + App.Utils.UI.setDateTimePickerValue($start, moment(workingPlanException.start, 'HH:mm').toDate()); + App.Utils.UI.setDateTimePickerValue($end, moment(workingPlanException.end, 'HH:mm').toDate()); if (!workingPlanException.breaks) { $breaks.find('tbody').html(renderNoBreaksRow()); @@ -267,8 +267,8 @@ App.Components.WorkingPlanExceptionsModal = (function () { $breaks.find('tbody .working-plan-exceptions-break-start, tbody .working-plan-exceptions-break-end'), ); } else { - $start[0]._flatpickr.setDate(moment('08:00', 'HH:mm').toDate()); - $end[0]._flatpickr.setDate(moment('20:00', 'HH:mm').toDate()); + App.Utils.UI.setDateTimePickerValue($start, moment('08:00', 'HH:mm').toDate()); + App.Utils.UI.setDateTimePickerValue($end, moment('20:00', 'HH:mm').toDate()); $breaks.find('tbody').html(renderNoBreaksRow()); } diff --git a/assets/js/http/booking_http_client.js b/assets/js/http/booking_http_client.js index be6a1cb0..c5aae91a 100755 --- a/assets/js/http/booking_http_client.js +++ b/assets/js/http/booking_http_client.js @@ -300,7 +300,7 @@ App.Http.Booking = (function () { const currentDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), i); if (unavailableDates.indexOf(moment(currentDate).format('YYYY-MM-DD')) === -1) { - $('#select-date')[0]._flatpickr.setDate(currentDate); + App.Utils.UI.setDateTimePickerValue($('#select-date'), currentDate); getAvailableHours(moment(currentDate).format('YYYY-MM-DD')); break; } @@ -328,7 +328,7 @@ App.Http.Booking = (function () { !unavailableDates.includes(dateQueryParam) && dateQueryParamMoment.format('YYYY-MM') === selectedDateMoment.format('YYYY-MM') ) { - $('#select-date')[0]._flatpickr.setDate(dateQueryParamMoment.toDate()); + App.Utils.UI.setDateTimePickerValue($('#select-date'), dateQueryParamMoment.toDate()); } } diff --git a/assets/js/pages/booking.js b/assets/js/pages/booking.js index 86ccba39..7fee4db6 100644 --- a/assets/js/pages/booking.js +++ b/assets/js/pages/booking.js @@ -126,7 +126,7 @@ App.Pages.Booking = (function () { }, }); - $selectDate[0]._flatpickr.setDate(new Date()); + App.Utils.UI.setDateTimePickerValue($selectDate, new Date()); const browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone; const isTimezoneSupported = $selectTimezone.find(`option[value="${browserTimezone}"]`).length > 0; @@ -269,7 +269,7 @@ App.Pages.Booking = (function () { * Event: Timezone "Changed" */ $selectTimezone.on('change', () => { - const date = $selectDate[0]._flatpickr.selectedDates[0]; + const date = App.Utils.UI.getDateTimePickerValue($selectDate); if (!date) { return; @@ -291,7 +291,7 @@ App.Pages.Booking = (function () { App.Http.Booking.getUnavailableDates( $target.val(), $selectService.val(), - moment($selectDate[0]._flatpickr.selectedDates[0]).format('YYYY-MM-DD'), + moment(App.Utils.UI.getDateTimePickerValue($selectDate)).format('YYYY-MM-DD'), ); updateConfirmFrame(); }); @@ -327,7 +327,7 @@ App.Pages.Booking = (function () { App.Http.Booking.getUnavailableDates( $selectProvider.val(), $target.val(), - moment($selectDate[0]._flatpickr.selectedDates[0]).format('YYYY-MM-DD'), + moment(App.Utils.UI.getDateTimePickerValue($selectDate)).format('YYYY-MM-DD'), ); updateConfirmFrame(); @@ -591,7 +591,7 @@ App.Pages.Booking = (function () { } // Appointment Details - let selectedDate = $selectDate[0]._flatpickr.selectedDates[0]; + let selectedDate = App.Utils.UI.getDateTimePickerValue($selectDate); if (selectedDate !== null) { selectedDate = App.Utils.Date.format(selectedDate, vars('date_format'), vars('time_format')); @@ -736,7 +736,7 @@ App.Pages.Booking = (function () { data.appointment = { start_datetime: - moment($selectDate[0]._flatpickr.selectedDates[0]).format('YYYY-MM-DD') + + moment(App.Utils.UI.getDateTimePickerValue($selectDate)).format('YYYY-MM-DD') + ' ' + moment($('.selected-hour').data('value'), 'HH:mm').format('HH:mm') + ':00', @@ -772,7 +772,7 @@ App.Pages.Booking = (function () { ); // Add the duration to the start datetime. - const selectedDate = moment($selectDate[0]._flatpickr.selectedDates[0]).format('YYYY-MM-DD'); + const selectedDate = moment(App.Utils.UI.getDateTimePickerValue($selectDate)).format('YYYY-MM-DD'); const selectedHour = $('.selected-hour').data('value'); // HH:mm @@ -807,7 +807,7 @@ App.Pages.Booking = (function () { // Set Appointment Date const startMoment = moment(appointment.start_datetime); - $selectDate[0]._flatpickr.setDate(startMoment.toDate()); + App.Utils.UI.setDateTimePickerValue($selectDate, startMoment.toDate()); App.Http.Booking.getAvailableHours(startMoment.format('YYYY-MM-DD')); // Apply Customer's Data diff --git a/assets/js/utils/calendar_default_view.js b/assets/js/utils/calendar_default_view.js index 0edabae4..e8e625d5 100755 --- a/assets/js/utils/calendar_default_view.js +++ b/assets/js/utils/calendar_default_view.js @@ -138,10 +138,10 @@ App.Utils.CalendarDefaultView = (function () { // Set the start and end datetime of the appointment. startMoment = moment(appointment.start_datetime); - $appointmentsModal.find('#start-datetime')[0]._flatpickr.setDate(startMoment.toDate()); + App.Utils.UI.setDateTimePickerValue($appointmentsModal.find('#start-datetime'), startMoment.toDate()); endMoment = moment(appointment.end_datetime); - $appointmentsModal.find('#end-datetime')[0]._flatpickr.setDate(endMoment.toDate()); + App.Utils.UI.setDateTimePickerValue($appointmentsModal.find('#end-datetime'), endMoment.toDate()); const customer = appointment.customer; $appointmentsModal.find('#customer-id').val(appointment.id_users_customer); @@ -183,10 +183,16 @@ App.Utils.CalendarDefaultView = (function () { // Apply unavailability data to dialog. $unavailabilitiesModal.find('.modal-header h3').text(lang('edit_unavailability_title')); - $unavailabilitiesModal.find('#unavailability-start')[0]._flatpickr.setDate(startMoment.toDate()); + App.Utils.UI.setDateTimePickerValue( + $unavailabilitiesModal.find('#unavailability-start'), + startMoment.toDate(), + ); + App.Utils.UI.setDateTimePickerValue( + $unavailabilitiesModal.find('#unavailability-end'), + endMoment.toDate(), + ); $unavailabilitiesModal.find('#unavailability-id').val(unavailability.id); $unavailabilitiesModal.find('#unavailability-provider').val(unavailability.id_users_provider); - $unavailabilitiesModal.find('#unavailability-end')[0]._flatpickr.setDate(endMoment.toDate()); $unavailabilitiesModal.find('#unavailability-notes').val(unavailability.notes); $unavailabilitiesModal.modal('show'); } @@ -1057,9 +1063,9 @@ App.Utils.CalendarDefaultView = (function () { $('#unavailability-provider').trigger('change'); - $('#unavailability-start')[0]._flatpickr.setDate(info.start); + App.Utils.UI.setDateTimePickerValue($('#unavailability-start'), info.start); - $('#unavailability-end')[0]._flatpickr.setDate(info.end); + App.Utils.UI.setDateTimePickerValue($('#unavailability-end'), info.end); messageModal.dispose(); }, @@ -1113,8 +1119,11 @@ App.Utils.CalendarDefaultView = (function () { } // Preselect time - $('#start-datetime')[0]._flatpickr.setDate(info.start); - $('#end-datetime')[0]._flatpickr.setDate(App.Pages.Calendar.getSelectionEndDate(info)); + App.Utils.UI.setDateTimePickerValue($('#start-datetime'), info.start); + App.Utils.UI.setDateTimePickerValue( + $('#end-datetime'), + App.Pages.Calendar.getSelectionEndDate(info), + ); messageModal.dispose(); }, @@ -1586,10 +1595,13 @@ App.Utils.CalendarDefaultView = (function () { // Set the start and end datetime of the appointment. const startDatetimeMoment = moment(appointment.start_datetime); - $appointmentsModal.find('#start-datetime')[0]._flatpickr.setDate(startDatetimeMoment.toDate()); + App.Utils.UI.setDateTimePickerValue( + $appointmentsModal.find('#start-datetime'), + startDatetimeMoment.toDate(), + ); const endDatetimeMoment = moment(appointment.end_datetime); - $appointmentsModal.find('#end-datetime')[0]._flatpickr.setDate(endDatetimeMoment.toDate()); + App.Utils.UI.setDateTimePickerValue($appointmentsModal.find('#end-datetime'), endDatetimeMoment.toDate()); const customer = appointment.customer; $appointmentsModal.find('#customer-id').val(appointment.id_users_customer); diff --git a/assets/js/utils/calendar_table_view.js b/assets/js/utils/calendar_table_view.js index 6178dc12..0a0279f4 100755 --- a/assets/js/utils/calendar_table_view.js +++ b/assets/js/utils/calendar_table_view.js @@ -43,25 +43,25 @@ App.Utils.CalendarTableView = (function () { function addEventListeners() { $calendar.on('click', '.calendar-header .btn.previous', () => { const dayInterval = $selectFilterItem.val(); - const currentDate = $selectDate[0]._flatpickr.selectedDates[0]; + const currentDate = App.Utils.UI.getDateTimePickerValue($selectDate); const startDate = moment(currentDate).subtract(1, 'days'); const endDate = startDate.clone().add(dayInterval - 1, 'days'); - $selectDate[0]._flatpickr.setDate(startDate.toDate()); + App.Utils.UI.setDateTimePickerValue($selectDate, startDate.toDate()); createView(startDate.toDate(), endDate.toDate()); }); $calendar.on('click', '.calendar-header .btn.next', () => { const dayInterval = $selectFilterItem.val(); - const currentDate = $selectDate[0]._flatpickr.selectedDates[0]; + const currentDate = App.Utils.UI.getDateTimePickerValue($selectDate); const startDate = moment(currentDate).add(1, 'days'); const endDate = startDate.clone().add(dayInterval - 1, 'days'); - $selectDate[0]._flatpickr.setDate(startDate.toDate()); + App.Utils.UI.setDateTimePickerValue($selectDate, startDate.toDate()); createView(startDate.toDate(), endDate.toDate()); }); $calendarToolbar.on('change', '#select-filter-item', () => { const dayInterval = $selectFilterItem.val(); - const currentDate = $selectDate[0]._flatpickr.selectedDates[0]; + const currentDate = App.Utils.UI.getDateTimePickerValue($selectDate); const startDate = moment(currentDate); const endDate = startDate.clone().add(dayInterval - 1, 'days'); createView(startDate.toDate(), endDate.toDate()); @@ -70,7 +70,7 @@ App.Utils.CalendarTableView = (function () { $calendarToolbar.on('click', '#reload-appointments', () => { // Fetch the events and place them in the existing HTML format. const dayInterval = $selectFilterItem.val(); - const currentDate = $selectDate[0]._flatpickr.selectedDates[0]; + const currentDate = App.Utils.UI.getDateTimePickerValue($selectDate); const startDateMoment = moment(currentDate); const startDate = startDateMoment.toDate(); const endDateMoment = startDateMoment.clone().add(dayInterval - 1, 'days'); @@ -212,10 +212,10 @@ App.Utils.CalendarTableView = (function () { // Set the start and end datetime of the appointment. startMoment = moment(appointment.start_datetime); - $appointmentsModal.find('#start-datetime')[0]._flatpickr.setDate(startMoment.toDate()); + App.Utils.UI.setDateTimePickerValue($appointmentsModal.find('#start-datetime'), startMoment.toDate()); endMoment = moment(appointment.end_datetime); - $appointmentsModal.find('#end-datetime')[0]._flatpickr.setDate(endMoment.toDate()); + App.Utils.UI.setDateTimePickerValue($appointmentsModal.find('#end-datetime'), endMoment.toDate()); const customer = appointment.customer; $appointmentsModal.find('#customer-id').val(appointment.id_users_customer); @@ -257,10 +257,10 @@ App.Utils.CalendarTableView = (function () { // Apply unavailability data to dialog. $unavailabilitiesModal.find('.modal-header h3').text(lang('edit_unavailability_title')); - $unavailabilitiesModal.find('#unavailability-start')[0]._flatpickr.setDate(startMoment.toDate()); + App.Utils.UI.setDateTimePickerValue($('#unavailability-start'), startMoment.toDate()); + App.Utils.UI.setDateTimePickerValue($('#unavailability-end'), endMoment.toDate()); $unavailabilitiesModal.find('#unavailability-id').val(unavailability.id); $unavailabilitiesModal.find('#unavailability-provider').val(unavailability.id_users_provider); - $unavailabilitiesModal.find('#unavailability-end')[0]._flatpickr.setDate(endMoment.toDate()); $unavailabilitiesModal.find('#unavailability-notes').val(unavailability.notes); $unavailabilitiesModal.modal('show'); @@ -1742,9 +1742,8 @@ App.Utils.CalendarTableView = (function () { $('#unavailability-provider').trigger('change'); - $('#unavailability-start')[0]._flatpickr.setDate(info.start); - - $('#unavailability-end')[0]._flatpickr.setDate(info.end); + App.Utils.UI.setDateTimePickerValue($('#unavailability-start'), info.start); + App.Utils.UI.setDateTimePickerValue($('#unavailability-end'), info.end); messageModal.dispose(); }, @@ -1783,8 +1782,11 @@ App.Utils.CalendarTableView = (function () { $selectProvider.trigger('change'); // Preselect time - $('#start-datetime')[0]._flatpickr.setDate(info.start); - $('#end-datetime')[0]._flatpickr.setDate(App.Pages.Calendar.getSelectionEndDate(info)); + App.Utils.UI.setDateTimePickerValue($('#start-datetime'), info.start); + App.Utils.UI.setDateTimePickerValue( + $('#end-datetime'), + App.Pages.Calendar.getSelectionEndDate(info), + ); messageModal.dispose(); }, diff --git a/assets/js/utils/working_plan.js b/assets/js/utils/working_plan.js index 30b81818..dd02937e 100755 --- a/assets/js/utils/working_plan.js +++ b/assets/js/utils/working_plan.js @@ -15,6 +15,8 @@ * This module implements the functionality of working plans. */ App.Utils.WorkingPlan = (function () { + const moment = window.moment; + /** * Class WorkingPlan * @@ -692,10 +694,10 @@ App.Utils.WorkingPlan = (function () { const $workEnd = $(instance.input).closest('tr').find('.work-end'); - const endMoment = moment($workEnd[0]._flatpickr.selectedDates[0]); + const endMoment = moment(App.Utils.UI.getDateTimePickerValue($workEnd)); if (startMoment > endMoment) { - $workEnd[0]._flatpickr.setDate(startMoment.add(1, 'hour').toDate()); + App.Utils.UI.setDateTimePickerValue($workEnd, startMoment.add(1, 'hour').toDate()); } }, });