diff --git a/application/views/layouts/backend_layout.php b/application/views/layouts/backend_layout.php index 97c11c0a..4c4cda36 100644 --- a/application/views/layouts/backend_layout.php +++ b/application/views/layouts/backend_layout.php @@ -16,6 +16,7 @@ + @@ -49,6 +50,7 @@ + diff --git a/assets/css/general.scss b/assets/css/general.scss index d4d26096..3461d2ac 100644 --- a/assets/css/general.scss +++ b/assets/css/general.scss @@ -434,3 +434,7 @@ body .popover-body a { body .clearfix { clear: both; } + +.flatpickr-wrapper { + width: 100%; +} diff --git a/assets/js/components/appointments_modal.js b/assets/js/components/appointments_modal.js index 8cda0920..0cd61b84 100755 --- a/assets/js/components/appointments_modal.js +++ b/assets/js/components/appointments_modal.js @@ -80,8 +80,8 @@ 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.datetimepicker('getDate')).format('YYYY-MM-DD HH:mm:ss'); - const endDatetime = moment($endDatetime.datetimepicker('getDate')).format('YYYY-MM-DD HH:mm:ss'); + 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 appointment = { id_services: $selectService.val(), @@ -194,19 +194,9 @@ App.Components.AppointmentsModal = (function () { startMoment.add(1, 'hour').set({minutes: 0}); } - $startDatetime.val( - App.Utils.Date.format(startMoment.toDate(), vars('date_format'), vars('time_format'), true) - ); - - $endDatetime.val( - App.Utils.Date.format( - startMoment.add(duration, 'minutes').toDate(), - vars('date_format'), - vars('time_format'), - true - ) - ); - + $startDatetime[0]._flatpickr.setDate(startMoment.toDate()); + $endDatetime[0]._flatpickr.setDate(startMoment.add(duration, 'minutes').toDate()); + // Display modal form. $appointmentsModal.find('.modal-header h3').text(lang('new_appointment_title')); @@ -348,8 +338,8 @@ App.Components.AppointmentsModal = (function () { const duration = service ? service.duration : 60; - const start = $startDatetime.datetimepicker('getDate'); - $endDatetime.datetimepicker('setDate', new Date(start.getTime() + duration * 60000)); + const start = $startDatetime[0]._flatpickr.selectedDates[0]; + $endDatetime[0]._flatpickr.setDate( new Date(start.getTime() + duration * 60000)); // Update the providers select box. @@ -466,15 +456,15 @@ App.Components.AppointmentsModal = (function () { (availableService) => Number(availableService.id) === Number(serviceId) ); - const start = $startDatetime.datetimepicker('getDate'); - $endDatetime.datetimepicker('setDate', new Date(start.getTime() + service.duration * 60000)); + const start = $startDatetime[0]._flatpickr.selectedDates[0]; + $endDatetime[0]._flatpickr.setDate( new Date(start.getTime() + service.duration * 60000)); } }); - $startDatetime.datetimepicker('setDate', startDatetime); + $startDatetime[0]._flatpickr.setDate( startDatetime); App.Utils.UI.initializeDatetimepicker($endDatetime); - $endDatetime.datetimepicker('setDate', endDatetime); + $endDatetime[0]._flatpickr.setDate( endDatetime); } /** @@ -511,8 +501,8 @@ App.Components.AppointmentsModal = (function () { } // Check appointment start and end time. - const start = $startDatetime.datetimepicker('getDate'); - const end = $endDatetime.datetimepicker('getDate'); + const start = $startDatetime[0]._flatpickr.selectedDates[0]; + const end = $endDatetime[0]._flatpickr.selectedDates[0]; if (start > end) { $startDatetime.addClass('is-invalid'); $endDatetime.addClass('is-invalid'); diff --git a/assets/js/components/unavailabilities_modal.js b/assets/js/components/unavailabilities_modal.js index 5272fd30..d16a6e6c 100755 --- a/assets/js/components/unavailabilities_modal.js +++ b/assets/js/components/unavailabilities_modal.js @@ -55,7 +55,7 @@ App.Components.UnavailabilitiesModal = (function () { $selectProvider.on('change', () => { updateTimezone(); }); - + /** * Event: Manage Unavailability Dialog Save Button "Click" * @@ -65,14 +65,14 @@ App.Components.UnavailabilitiesModal = (function () { $unavailabilitiesModal.find('.modal-message').addClass('d-none'); $unavailabilitiesModal.find('.is-invalid').removeClass('is-invalid'); - const startMoment = moment($startDatetime.datetimepicker('getDate')); + const startMoment = moment($startDatetime[0]._flatpickr.selectedDates[0]); if (!startMoment.isValid()) { $startDatetime.addClass('is-invalid'); return; } - const endMoment = moment($endDatetime.datetimepicker('getDate')); + const endMoment = moment($endDatetime[0]._flatpickr.selectedDates[0]); if (!endMoment.isValid()) { $endDatetime.addClass('is-invalid'); @@ -153,17 +153,9 @@ App.Components.UnavailabilitiesModal = (function () { $selectProvider.val($selectFilterItem.val()).closest('.form-group').hide(); } - $startDatetime.val( - App.Utils.Date.format(startMoment.toDate(), vars('date_format'), vars('time_format'), true) - ); - $endDatetime.val( - App.Utils.Date.format( - startMoment.add(1, 'hour').toDate(), - vars('date_format'), - vars('time_format'), - true - ) - ); + $startDatetime[0]._flatpickr.setDate(startMoment.toDate()) + $endDatetime[0]._flatpickr.setDate(startMoment.add(1, 'hour').toDate()); + $dialog.find('.modal-header h3').text(lang('new_unavailability_title')); $dialog.modal('show'); }); @@ -188,8 +180,8 @@ App.Components.UnavailabilitiesModal = (function () { true ); - App.Utils.UI.initializeDatetimepicker($startDatetime); - + App.Utils.UI.initializeDatetimepicker($startDatetime); + $startDatetime.val(start); App.Utils.UI.initializeDatetimepicker($endDatetime); diff --git a/assets/js/components/working_plan_exceptions_modal.js b/assets/js/components/working_plan_exceptions_modal.js index 17833e86..5c1b4190 100644 --- a/assets/js/components/working_plan_exceptions_modal.js +++ b/assets/js/components/working_plan_exceptions_modal.js @@ -43,19 +43,19 @@ App.Components.WorkingPlanExceptionsModal = (function () { function validate() { $modal.find('.is-invalid').removeClass('is-invalid'); - const date = $date.datepicker('getDate'); + const date = $date[0]._flatpickr.selectedDates[0]; if (!date) { $date.addClass('is-invalid'); } - const start = $start.timepicker('getDate'); + const start = $start[0]._flatpickr.selectedDates[0]; if (!start) { $start.addClass('is-invalid'); } - const end = $end.timepicker('getDate'); + const end = $end[0]._flatpickr.selectedDates[0]; if (!end) { $end.addClass('is-invalid'); @@ -120,11 +120,11 @@ App.Components.WorkingPlanExceptionsModal = (function () { return; } - const date = moment($date.datepicker('getDate')).format('YYYY-MM-DD'); + const date = moment($date[0]._flatpickr.selectedDates[0]).format('YYYY-MM-DD'); const workingPlanException = { - start: moment($start.datetimepicker('getDate')).format('HH:mm'), - end: moment($end.datetimepicker('getDate')).format('HH:mm'), + start: moment($start[0]._flatpickr.selectedDates[0]).format('HH:mm'), + end: moment($end[0]._flatpickr.selectedDates[0]).format('HH:mm'), breaks: getBreaks() }; @@ -181,9 +181,9 @@ App.Components.WorkingPlanExceptionsModal = (function () { function add() { deferred = $.Deferred(); - $date.datepicker('setDate', new Date()); - $start.timepicker('setDate', moment('08:00', 'HH:mm').toDate()); - $end.timepicker('setDate', moment('20:00', 'HH:mm').toDate()); + $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()); $modal.modal('show'); @@ -201,9 +201,9 @@ App.Components.WorkingPlanExceptionsModal = (function () { function edit(date, workingPlanException) { deferred = $.Deferred(); - $date.datepicker('setDate', moment(date, 'YYYY-MM-DD').toDate()); - $start.timepicker('setDate', moment(workingPlanException.start, 'HH:mm').toDate()); - $end.timepicker('setDate', moment(workingPlanException.end, 'HH:mm').toDate()); + $date[0]._flatpickr.setDate( moment(date, 'YYYY-MM-DD').toDate()); + $start[0]._flatpickr.setDate( moment(workingPlanException.start, 'HH:mm').toDate()); + $end[0]._flatpickr.setDate( moment(workingPlanException.end, 'HH:mm').toDate()); workingPlanException.breaks.forEach((workingPlanExceptionBreak) => { renderBreakRow(workingPlanExceptionBreak).appendTo($breaks.find('tbody')); diff --git a/assets/js/http/booking_http_client.js b/assets/js/http/booking_http_client.js index 094e5fcb..afbef477 100755 --- a/assets/js/http/booking_http_client.js +++ b/assets/js/http/booking_http_client.js @@ -281,7 +281,7 @@ App.Http.Booking = (function () { for (let i = 1; i <= numberOfDays; i++) { const currentDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), i); if (unavailableDates.indexOf(moment(currentDate).format('YYYY-MM-DD')) === -1) { - $('#select-date').datepicker('setDate', currentDate); + $('#select-date')[0]._flatpickr.setDate( currentDate); getAvailableHours(moment(currentDate).format('YYYY-MM-DD')); break; } diff --git a/assets/js/pages/booking.js b/assets/js/pages/booking.js index 8a5314ba..1af897cb 100644 --- a/assets/js/pages/booking.js +++ b/assets/js/pages/booking.js @@ -135,7 +135,7 @@ App.Pages.Booking = (function () { closeText: lang('close'), onSelect: () => { - App.Http.Booking.getAvailableHours(moment($selectDate.datepicker('getDate')).format('YYYY-MM-DD')); + App.Http.Booking.getAvailableHours(moment($selectDate[0]._flatpickr.selectedDates[0]).format('YYYY-MM-DD')); updateConfirmFrame(); }, @@ -252,7 +252,7 @@ App.Pages.Booking = (function () { * Event: Timezone "Changed" */ $selectTimezone.on('change', () => { - const date = $selectDate.datepicker('getDate'); + const date = $selectDate[0]._flatpickr.selectedDates[0]; if (!date) { return; @@ -274,7 +274,7 @@ App.Pages.Booking = (function () { App.Http.Booking.getUnavailableDates( $target.val(), $selectService.val(), - moment($selectDate.datepicker('getDate')).format('YYYY-MM-DD') + moment($selectDate[0]._flatpickr.selectedDates[0]).format('YYYY-MM-DD') ); updateConfirmFrame(); }); @@ -310,7 +310,7 @@ App.Pages.Booking = (function () { App.Http.Booking.getUnavailableDates( $selectProvider.val(), $target.val(), - moment($selectDate.datepicker('getDate')).format('YYYY-MM-DD') + moment($selectDate[0]._flatpickr.selectedDates[0]).format('YYYY-MM-DD') ); updateConfirmFrame(); @@ -576,7 +576,7 @@ App.Pages.Booking = (function () { } // Appointment Details - let selectedDate = $selectDate.datepicker('getDate'); + let selectedDate = $selectDate[0]._flatpickr.selectedDates[0]; if (selectedDate !== null) { selectedDate = App.Utils.Date.format(selectedDate, vars('date_format'), vars('time_format')); @@ -708,7 +708,7 @@ App.Pages.Booking = (function () { data.appointment = { start_datetime: - moment($selectDate.datepicker('getDate')).format('YYYY-MM-DD') + + moment($selectDate[0]._flatpickr.selectedDates[0]).format('YYYY-MM-DD') + ' ' + moment($('.selected-hour').data('value'), 'HH:mm').format('HH:mm') + ':00', @@ -744,7 +744,7 @@ App.Pages.Booking = (function () { ); // Add the duration to the start datetime. - const selectedDate = moment($selectDate.datepicker('getDate')).format('YYYY-MM-DD'); + const selectedDate = moment($selectDate[0]._flatpickr.selectedDates[0]).format('YYYY-MM-DD'); const selectedHour = $('.selected-hour').data('value'); // HH:mm @@ -779,7 +779,7 @@ App.Pages.Booking = (function () { // Set Appointment Date const startMoment = moment(appointment.start_datetime); - $selectDate.datepicker('setDate', startMoment.toDate()); + $selectDate[0]._flatpickr.setDate( 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 89e752ac..f50f1769 100755 --- a/assets/js/utils/calendar_default_view.js +++ b/assets/js/utils/calendar_default_view.js @@ -136,10 +136,10 @@ App.Utils.CalendarDefaultView = (function () { // Set the start and end datetime of the appointment. startMoment = moment(appointment.start_datetime); - $appointmentsModal.find('#start-datetime').datetimepicker('setDate', startMoment.toDate()); + $appointmentsModal.find('#start-datetime')[0]._flatpickr.setDate( startMoment.toDate()); endMoment = moment(appointment.end_datetime); - $appointmentsModal.find('#end-datetime').datetimepicker('setDate', endMoment.toDate()); + $appointmentsModal.find('#end-datetime')[0]._flatpickr.setDate( endMoment.toDate()); const customer = appointment.customer; $appointmentsModal.find('#customer-id').val(appointment.id_users_customer); @@ -176,10 +176,10 @@ App.Utils.CalendarDefaultView = (function () { // Apply unavailability data to dialog. $unavailabilitiesModal.find('.modal-header h3').text(lang('edit_unavailability_title')); - $unavailabilitiesModal.find('#unavailability-start').datetimepicker('setDate', startMoment.toDate()); + $unavailabilitiesModal.find('#unavailability-start')[0]._flatpickr.setDate( startMoment.toDate()); $unavailabilitiesModal.find('#unavailability-id').val(unavailability.id); $unavailabilitiesModal.find('#unavailability-provider').val(unavailability.id_users_provider); - $unavailabilitiesModal.find('#unavailability-end').datetimepicker('setDate', endMoment.toDate()); + $unavailabilitiesModal.find('#unavailability-end')[0]._flatpickr.setDate( endMoment.toDate()); $unavailabilitiesModal.find('#unavailability-notes').val(unavailability.notes); $unavailabilitiesModal.modal('show'); } @@ -1540,9 +1540,9 @@ App.Utils.CalendarDefaultView = (function () { $('#unavailability-provider').trigger('change'); - $('#unavailability-start').datepicker('setDate', info.start); + $('#unavailability-start')[0]._flatpickr.setDate( info.start); - $('#unavailability-end').datepicker('setDate', info.end); + $('#unavailability-end')[0]._flatpickr.setDate( info.end); $('#message-box').dialog('close'); } @@ -1598,10 +1598,10 @@ App.Utils.CalendarDefaultView = (function () { } // Preselect time - $('#start-datetime').datepicker('setDate', info.start); - $('#end-datetime').datepicker('setDate', App.Pages.Calendar.getSelectionEndDate(info)); + $('#start-datetime')[0]._flatpickr.setDate( info.start); + $('#end-datetime')[0]._flatpickr.setDate( App.Pages.Calendar.getSelectionEndDate(info)); - // $('#end-datetime').datepicker('setDate', info.end); + // $('#end-datetime')[0]._flatpickr.setDate( info.end); $('#message-box').dialog('close'); } } @@ -1695,10 +1695,10 @@ App.Utils.CalendarDefaultView = (function () { // Set the start and end datetime of the appointment. const startDatetimeMoment = moment(appointment.start_datetime); - $appointmentsModal.find('#start-datetime').datetimepicker('setDate', startDatetimeMoment.toDate()); + $appointmentsModal.find('#start-datetime')[0]._flatpickr.setDate( startDatetimeMoment.toDate()); const endDatetimeMoment = moment(appointment.end_datetime); - $appointmentsModal.find('#end-datetime').datetimepicker('setDate', endDatetimeMoment.toDate()); + $appointmentsModal.find('#end-datetime')[0]._flatpickr.setDate( 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 aaf43827..7b0965df 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.datepicker('getDate'); + const currentDate = $selectDate[0]._flatpickr.selectedDates[0]; const startDate = moment(currentDate).subtract(1, 'days'); const endDate = startDate.clone().add(dayInterval - 1, 'days'); - $selectDate.datepicker('setDate', startDate.toDate()); + $selectDate[0]._flatpickr.setDate( startDate.toDate()); createView(startDate.toDate(), endDate.toDate()); }); $calendar.on('click', '.calendar-header .btn.next', () => { const dayInterval = $selectFilterItem.val(); - const currentDate = $selectDate.datepicker('getDate'); + const currentDate = $selectDate[0]._flatpickr.selectedDates[0]; const startDate = moment(currentDate).add(1, 'days'); const endDate = startDate.clone().add(dayInterval - 1, 'days'); - $selectDate.datepicker('setDate', startDate.toDate()); + $selectDate[0]._flatpickr.setDate( startDate.toDate()); createView(startDate.toDate(), endDate.toDate()); }); $calendarToolbar.on('change', '#select-filter-item', () => { const dayInterval = $selectFilterItem.val(); - const currentDate = $selectDate.datepicker('getDate'); + const currentDate = $selectDate[0]._flatpickr.selectedDates[0]; 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.datepicker('getDate'); + const currentDate = $selectDate[0]._flatpickr.selectedDates[0]; const startDateMoment = moment(currentDate); const startDate = startDateMoment.toDate(); const endDateMoment = startDateMoment.clone().add(dayInterval - 1, 'days'); @@ -209,10 +209,10 @@ App.Utils.CalendarTableView = (function () { // Set the start and end datetime of the appointment. startMoment = moment(appointment.start_datetime); - $appointmentsModal.find('#start-datetime').datetimepicker('setDate', startMoment.toDate()); + $appointmentsModal.find('#start-datetime')[0]._flatpickr.setDate( startMoment.toDate()); endMoment = moment(appointment.end_datetime); - $appointmentsModal.find('#end-datetime').datetimepicker('setDate', endMoment.toDate()); + $appointmentsModal.find('#end-datetime')[0]._flatpickr.setDate( endMoment.toDate()); const customer = appointment.customer; $appointmentsModal.find('#customer-id').val(appointment.id_users_customer); @@ -249,10 +249,10 @@ App.Utils.CalendarTableView = (function () { // Apply unavailability data to dialog. $unavailabilitiesModal.find('.modal-header h3').text(lang('edit_unavailability_title')); - $unavailabilitiesModal.find('#unavailability-start').datetimepicker('setDate', startMoment.toDate()); + $unavailabilitiesModal.find('#unavailability-start')[0]._flatpickr.setDate( startMoment.toDate()); $unavailabilitiesModal.find('#unavailability-id').val(unavailability.id); $unavailabilitiesModal.find('#unavailability-provider').val(unavailability.id_users_provider); - $unavailabilitiesModal.find('#unavailability-end').datetimepicker('setDate', endMoment.toDate()); + $unavailabilitiesModal.find('#unavailability-end')[0]._flatpickr.setDate( endMoment.toDate()); $unavailabilitiesModal.find('#unavailability-notes').val(unavailability.notes); $unavailabilitiesModal.modal('show'); @@ -786,8 +786,8 @@ App.Utils.CalendarTableView = (function () { $selectProvider.trigger('change'); // Preselect time - $('#start-datetime').datepicker('setDate', info.start); - $('#end-datetime').datepicker('setDate', App.Pages.Calendar.getSelectionEndDate(info)); + $('#start-datetime')[0]._flatpickr.setDate( info.start); + $('#end-datetime')[0]._flatpickr.setDate( App.Pages.Calendar.getSelectionEndDate(info)); return false; },