maket
/
MaketRandevu
1
1
Fork 0
Code Issues 15 Pull Requests Packages Projects Releases 4 Wiki Activity

Use the helper methods to set and get date time picker values

This commit is contained in:
Alex Tselegidis 2024-01-06 11:06:48 +01:00
parent 02162ee232
commit cd768bda85
8 changed files with 99 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
assets/js/components/appointments_modal.js
View File

@ -52,6 +52,8 @@ App.Components.AppointmentsModal = (function () {
const $customField4 = $('#custom-field-4'); const $customField4 = $('#custom-field-4');
const $customField5 = $('#custom-field-5'); const $customField5 = $('#custom-field-5');
const moment = window.moment;
/** /**
* Update the displayed timezone. * 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 // ID must exist on the object in order for the model to update the record and not to perform
// an insert operation. // an insert operation.
const startDatetime = moment($startDatetime[0]._flatpickr.selectedDates[0]).format('YYYY-MM-DD HH:mm:ss'); const startDateTimeObject = App.Utils.UI.getDateTimePickerValue($startDatetime);
const endDatetime = moment($endDatetime[0]._flatpickr.selectedDates[0]).format('YYYY-MM-DD HH:mm:ss'); 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 = { const appointment = {
id_services: $selectService.val(), id_services: $selectService.val(),
@ -204,8 +209,8 @@ App.Components.AppointmentsModal = (function () {
startMoment.add(1, 'hour').set({minutes: 0}); startMoment.add(1, 'hour').set({minutes: 0});
} }
$startDatetime[0]._flatpickr.setDate(startMoment.toDate()); App.Utils.UI.setDateTimePickerValue($startDatetime, startMoment.toDate());
$endDatetime[0]._flatpickr.setDate(startMoment.add(duration, 'minutes').toDate()); App.Utils.UI.setDateTimePickerValue($endDatetime, startMoment.add(duration, 'minutes').toDate());
// Display modal form. // Display modal form.
$appointmentsModal.find('.modal-header h3').text(lang('new_appointment_title')); $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 duration = service ? service.duration : 60;
const start = $startDatetime[0]._flatpickr.selectedDates[0]; const startDateTimeObject = App.Utils.UI.getDateTimePickerValue($startDatetime);
$endDatetime[0]._flatpickr.setDate(new Date(start.getTime() + duration * 60000)); const endDateTimeObject = new Date(startDateTimeObject.getTime() + duration * 60000);
App.Utils.UI.setDateTimePickerValue($endDatetime, endDateTimeObject);
// Update the providers select box. // Update the providers select box.
@ -490,15 +496,16 @@ App.Components.AppointmentsModal = (function () {
(availableService) => Number(availableService.id) === Number(serviceId), (availableService) => Number(availableService.id) === Number(serviceId),
); );
const start = $startDatetime[0]._flatpickr.selectedDates[0]; const startDateTimeObject = App.Utils.UI.getDateTimePickerValue($startDatetime);
$endDatetime[0]._flatpickr.setDate(new Date(start.getTime() + service.duration * 60000)); 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); 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. // Check appointment start and end time.
const start = $startDatetime[0]._flatpickr.selectedDates[0]; const startDateTimeObject = App.Utils.UI.getDateTimePickerValue($startDatetime);
const end = $endDatetime[0]._flatpickr.selectedDates[0]; const endDateTimeObject = App.Utils.UI.getDateTimePickerValue($endDatetime);
if (start > end) {
if (startDateTimeObject > endDateTimeObject) {
$startDatetime.addClass('is-invalid'); $startDatetime.addClass('is-invalid');
$endDatetime.addClass('is-invalid'); $endDatetime.addClass('is-invalid');
throw new Error(lang('start_date_before_end_error')); throw new Error(lang('start_date_before_end_error'));

20
assets/js/components/unavailabilities_modal.js
View File

@ -28,6 +28,8 @@ App.Components.UnavailabilitiesModal = (function () {
const $selectFilterItem = $('#select-filter-item'); const $selectFilterItem = $('#select-filter-item');
const $reloadAppointments = $('#reload-appointments'); const $reloadAppointments = $('#reload-appointments');
const moment = window.moment;
/** /**
* Update the displayed timezone. * Update the displayed timezone.
*/ */
@ -68,22 +70,22 @@ App.Components.UnavailabilitiesModal = (function () {
return; 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'); $startDatetime.addClass('is-invalid');
return; 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'); $endDatetime.addClass('is-invalid');
return; return;
} }
if (startMoment.isAfter(endMoment)) { if (startDateTimeMoment.isAfter(endDateTimeMoment)) {
// Start time is after end time - display message to user. // Start time is after end time - display message to user.
$unavailabilitiesModal $unavailabilitiesModal
.find('.modal-message') .find('.modal-message')
@ -100,8 +102,8 @@ App.Components.UnavailabilitiesModal = (function () {
// Unavailability period records go to the appointments table. // Unavailability period records go to the appointments table.
const unavailability = { const unavailability = {
start_datetime: startMoment.format('YYYY-MM-DD HH:mm:ss'), start_datetime: startDateTimeMoment.format('YYYY-MM-DD HH:mm:ss'),
end_datetime: endMoment.format('YYYY-MM-DD HH:mm:ss'), end_datetime: endDateTimeMoment.format('YYYY-MM-DD HH:mm:ss'),
notes: $unavailabilitiesModal.find('#unavailability-notes').val(), notes: $unavailabilitiesModal.find('#unavailability-notes').val(),
id_users_provider: $selectProvider.val(), id_users_provider: $selectProvider.val(),
}; };
@ -156,8 +158,8 @@ App.Components.UnavailabilitiesModal = (function () {
$selectProvider.val($selectFilterItem.val()).closest('.form-group').hide(); $selectProvider.val($selectFilterItem.val()).closest('.form-group').hide();
} }
$startDatetime[0]._flatpickr.setDate(startMoment.toDate()); App.Utils.UI.setDateTimePickerValue($startDatetime, startMoment.toDate());
$endDatetime[0]._flatpickr.setDate(startMoment.add(1, 'hour').toDate()); App.Utils.UI.setDateTimePickerValue($endDatetime, startMoment.add(1, 'hour').toDate());
$dialog.find('.modal-header h3').text(lang('new_unavailability_title')); $dialog.find('.modal-header h3').text(lang('new_unavailability_title'));
$dialog.modal('show'); $dialog.modal('show');

28
assets/js/components/working_plan_exceptions_modal.js
View File

@ -77,19 +77,19 @@ App.Components.WorkingPlanExceptionsModal = (function () {
function validate() { function validate() {
$modal.find('.is-invalid').removeClass('is-invalid'); $modal.find('.is-invalid').removeClass('is-invalid');
const date = $date[0]._flatpickr.selectedDates[0]; const date = App.Utils.UI.getDateTimePickerValue($date);
if (!date) { if (!date) {
$date.addClass('is-invalid'); $date.addClass('is-invalid');
} }
const start = $start[0]._flatpickr.selectedDates[0]; const start = App.Utils.UI.getDateTimePickerValue($start);
if (!start) { if (!start) {
$start.addClass('is-invalid'); $start.addClass('is-invalid');
} }
const end = $end[0]._flatpickr.selectedDates[0]; const end = App.Utils.UI.getDateTimePickerValue($end);
if (!end) { if (!end) {
$end.addClass('is-invalid'); $end.addClass('is-invalid');
@ -157,15 +157,15 @@ App.Components.WorkingPlanExceptionsModal = (function () {
return; 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 isNonWorkingDay = $isNonWorkingDay.prop('checked');
const workingPlanException = isNonWorkingDay const workingPlanException = isNonWorkingDay
? null ? null
: { : {
start: moment($start[0]._flatpickr.selectedDates[0]).format('HH:mm'), start: moment(App.Utils.UI.getDateTimePickerValue($start)).format('HH:mm'),
end: moment($end[0]._flatpickr.selectedDates[0]).format('HH:mm'), end: moment(App.Utils.UI.getDateTimePickerValue($end)).format('HH:mm'),
breaks: getBreaks(), breaks: getBreaks(),
}; };
@ -223,9 +223,9 @@ App.Components.WorkingPlanExceptionsModal = (function () {
function add() { function add() {
deferred = $.Deferred(); deferred = $.Deferred();
$date[0]._flatpickr.setDate(new Date()); App.Utils.UI.setDateTimePickerValue($date, new Date());
$start[0]._flatpickr.setDate(moment('08:00', 'HH:mm').toDate()); App.Utils.UI.setDateTimePickerValue($start, moment('08:00', 'HH:mm').toDate());
$end[0]._flatpickr.setDate(moment('20:00', 'HH:mm').toDate()); App.Utils.UI.setDateTimePickerValue($end, moment('20:00', 'HH:mm').toDate());
$isNonWorkingDay.prop('checked', false); $isNonWorkingDay.prop('checked', false);
@ -249,11 +249,11 @@ App.Components.WorkingPlanExceptionsModal = (function () {
const isNonWorkingDay = !Boolean(workingPlanException); 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) { if (isNonWorkingDay === false) {
$start[0]._flatpickr.setDate(moment(workingPlanException.start, 'HH:mm').toDate()); App.Utils.UI.setDateTimePickerValue($start, moment(workingPlanException.start, 'HH:mm').toDate());
$end[0]._flatpickr.setDate(moment(workingPlanException.end, 'HH:mm').toDate()); App.Utils.UI.setDateTimePickerValue($end, moment(workingPlanException.end, 'HH:mm').toDate());
if (!workingPlanException.breaks) { if (!workingPlanException.breaks) {
$breaks.find('tbody').html(renderNoBreaksRow()); $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'), $breaks.find('tbody .working-plan-exceptions-break-start, tbody .working-plan-exceptions-break-end'),
); );
} else { } else {
$start[0]._flatpickr.setDate(moment('08:00', 'HH:mm').toDate()); App.Utils.UI.setDateTimePickerValue($start, moment('08:00', 'HH:mm').toDate());
$end[0]._flatpickr.setDate(moment('20:00', 'HH:mm').toDate()); App.Utils.UI.setDateTimePickerValue($end, moment('20:00', 'HH:mm').toDate());
$breaks.find('tbody').html(renderNoBreaksRow()); $breaks.find('tbody').html(renderNoBreaksRow());
} }

4
assets/js/http/booking_http_client.js
View File

@ -300,7 +300,7 @@ App.Http.Booking = (function () {
const currentDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), i); const currentDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), i);
if (unavailableDates.indexOf(moment(currentDate).format('YYYY-MM-DD')) === -1) { 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')); getAvailableHours(moment(currentDate).format('YYYY-MM-DD'));
break; break;
} }
@ -328,7 +328,7 @@ App.Http.Booking = (function () {
!unavailableDates.includes(dateQueryParam) && !unavailableDates.includes(dateQueryParam) &&
dateQueryParamMoment.format('YYYY-MM') === selectedDateMoment.format('YYYY-MM') dateQueryParamMoment.format('YYYY-MM') === selectedDateMoment.format('YYYY-MM')
) { ) {
$('#select-date')[0]._flatpickr.setDate(dateQueryParamMoment.toDate()); App.Utils.UI.setDateTimePickerValue($('#select-date'), dateQueryParamMoment.toDate());
} }
} }

16
assets/js/pages/booking.js
View File

@ -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 browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
const isTimezoneSupported = $selectTimezone.find(`option[value="${browserTimezone}"]`).length > 0; const isTimezoneSupported = $selectTimezone.find(`option[value="${browserTimezone}"]`).length > 0;
@ -269,7 +269,7 @@ App.Pages.Booking = (function () {
* Event: Timezone "Changed" * Event: Timezone "Changed"
*/ */
$selectTimezone.on('change', () => { $selectTimezone.on('change', () => {
const date = $selectDate[0]._flatpickr.selectedDates[0]; const date = App.Utils.UI.getDateTimePickerValue($selectDate);
if (!date) { if (!date) {
return; return;
@ -291,7 +291,7 @@ App.Pages.Booking = (function () {
App.Http.Booking.getUnavailableDates( App.Http.Booking.getUnavailableDates(
$target.val(), $target.val(),
$selectService.val(), $selectService.val(),
moment($selectDate[0]._flatpickr.selectedDates[0]).format('YYYY-MM-DD'), moment(App.Utils.UI.getDateTimePickerValue($selectDate)).format('YYYY-MM-DD'),
); );
updateConfirmFrame(); updateConfirmFrame();
}); });
@ -327,7 +327,7 @@ App.Pages.Booking = (function () {
App.Http.Booking.getUnavailableDates( App.Http.Booking.getUnavailableDates(
$selectProvider.val(), $selectProvider.val(),
$target.val(), $target.val(),
moment($selectDate[0]._flatpickr.selectedDates[0]).format('YYYY-MM-DD'), moment(App.Utils.UI.getDateTimePickerValue($selectDate)).format('YYYY-MM-DD'),
); );
updateConfirmFrame(); updateConfirmFrame();
@ -591,7 +591,7 @@ App.Pages.Booking = (function () {
} }
// Appointment Details // Appointment Details
let selectedDate = $selectDate[0]._flatpickr.selectedDates[0]; let selectedDate = App.Utils.UI.getDateTimePickerValue($selectDate);
if (selectedDate !== null) { if (selectedDate !== null) {
selectedDate = App.Utils.Date.format(selectedDate, vars('date_format'), vars('time_format')); selectedDate = App.Utils.Date.format(selectedDate, vars('date_format'), vars('time_format'));
@ -736,7 +736,7 @@ App.Pages.Booking = (function () {
data.appointment = { data.appointment = {
start_datetime: 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') + moment($('.selected-hour').data('value'), 'HH:mm').format('HH:mm') +
':00', ':00',
@ -772,7 +772,7 @@ App.Pages.Booking = (function () {
); );
// Add the duration to the start datetime. // 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 const selectedHour = $('.selected-hour').data('value'); // HH:mm
@ -807,7 +807,7 @@ App.Pages.Booking = (function () {
// Set Appointment Date // Set Appointment Date
const startMoment = moment(appointment.start_datetime); 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')); App.Http.Booking.getAvailableHours(startMoment.format('YYYY-MM-DD'));
// Apply Customer's Data // Apply Customer's Data

32
assets/js/utils/calendar_default_view.js
View File

@ -138,10 +138,10 @@ App.Utils.CalendarDefaultView = (function () {
// Set the start and end datetime of the appointment. // Set the start and end datetime of the appointment.
startMoment = moment(appointment.start_datetime); 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); 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; const customer = appointment.customer;
$appointmentsModal.find('#customer-id').val(appointment.id_users_customer); $appointmentsModal.find('#customer-id').val(appointment.id_users_customer);
@ -183,10 +183,16 @@ App.Utils.CalendarDefaultView = (function () {
// Apply unavailability data to dialog. // Apply unavailability data to dialog.
$unavailabilitiesModal.find('.modal-header h3').text(lang('edit_unavailability_title')); $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-id').val(unavailability.id);
$unavailabilitiesModal.find('#unavailability-provider').val(unavailability.id_users_provider); $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.find('#unavailability-notes').val(unavailability.notes);
$unavailabilitiesModal.modal('show'); $unavailabilitiesModal.modal('show');
} }
@ -1057,9 +1063,9 @@ App.Utils.CalendarDefaultView = (function () {
$('#unavailability-provider').trigger('change'); $('#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(); messageModal.dispose();
}, },
@ -1113,8 +1119,11 @@ App.Utils.CalendarDefaultView = (function () {
} }
// Preselect time // Preselect time
$('#start-datetime')[0]._flatpickr.setDate(info.start); App.Utils.UI.setDateTimePickerValue($('#start-datetime'), info.start);
$('#end-datetime')[0]._flatpickr.setDate(App.Pages.Calendar.getSelectionEndDate(info)); App.Utils.UI.setDateTimePickerValue(
$('#end-datetime'),
App.Pages.Calendar.getSelectionEndDate(info),
);
messageModal.dispose(); messageModal.dispose();
}, },
@ -1586,10 +1595,13 @@ App.Utils.CalendarDefaultView = (function () {
// Set the start and end datetime of the appointment. // Set the start and end datetime of the appointment.
const startDatetimeMoment = moment(appointment.start_datetime); 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); 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; const customer = appointment.customer;
$appointmentsModal.find('#customer-id').val(appointment.id_users_customer); $appointmentsModal.find('#customer-id').val(appointment.id_users_customer);

32
assets/js/utils/calendar_table_view.js
View File

@ -43,25 +43,25 @@ App.Utils.CalendarTableView = (function () {
function addEventListeners() { function addEventListeners() {
$calendar.on('click', '.calendar-header .btn.previous', () => { $calendar.on('click', '.calendar-header .btn.previous', () => {
const dayInterval = $selectFilterItem.val(); 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 startDate = moment(currentDate).subtract(1, 'days');
const endDate = startDate.clone().add(dayInterval - 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()); createView(startDate.toDate(), endDate.toDate());
}); });
$calendar.on('click', '.calendar-header .btn.next', () => { $calendar.on('click', '.calendar-header .btn.next', () => {
const dayInterval = $selectFilterItem.val(); 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 startDate = moment(currentDate).add(1, 'days');
const endDate = startDate.clone().add(dayInterval - 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()); createView(startDate.toDate(), endDate.toDate());
}); });
$calendarToolbar.on('change', '#select-filter-item', () => { $calendarToolbar.on('change', '#select-filter-item', () => {
const dayInterval = $selectFilterItem.val(); const dayInterval = $selectFilterItem.val();
const currentDate = $selectDate[0]._flatpickr.selectedDates[0]; const currentDate = App.Utils.UI.getDateTimePickerValue($selectDate);
const startDate = moment(currentDate); const startDate = moment(currentDate);
const endDate = startDate.clone().add(dayInterval - 1, 'days'); const endDate = startDate.clone().add(dayInterval - 1, 'days');
createView(startDate.toDate(), endDate.toDate()); createView(startDate.toDate(), endDate.toDate());
@ -70,7 +70,7 @@ App.Utils.CalendarTableView = (function () {
$calendarToolbar.on('click', '#reload-appointments', () => { $calendarToolbar.on('click', '#reload-appointments', () => {
// Fetch the events and place them in the existing HTML format. // Fetch the events and place them in the existing HTML format.
const dayInterval = $selectFilterItem.val(); const dayInterval = $selectFilterItem.val();
const currentDate = $selectDate[0]._flatpickr.selectedDates[0]; const currentDate = App.Utils.UI.getDateTimePickerValue($selectDate);
const startDateMoment = moment(currentDate); const startDateMoment = moment(currentDate);
const startDate = startDateMoment.toDate(); const startDate = startDateMoment.toDate();
const endDateMoment = startDateMoment.clone().add(dayInterval - 1, 'days'); 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. // Set the start and end datetime of the appointment.
startMoment = moment(appointment.start_datetime); 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); 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; const customer = appointment.customer;
$appointmentsModal.find('#customer-id').val(appointment.id_users_customer); $appointmentsModal.find('#customer-id').val(appointment.id_users_customer);
@ -257,10 +257,10 @@ App.Utils.CalendarTableView = (function () {
// Apply unavailability data to dialog. // Apply unavailability data to dialog.
$unavailabilitiesModal.find('.modal-header h3').text(lang('edit_unavailability_title')); $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-id').val(unavailability.id);
$unavailabilitiesModal.find('#unavailability-provider').val(unavailability.id_users_provider); $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.find('#unavailability-notes').val(unavailability.notes);
$unavailabilitiesModal.modal('show'); $unavailabilitiesModal.modal('show');
@ -1742,9 +1742,8 @@ App.Utils.CalendarTableView = (function () {
$('#unavailability-provider').trigger('change'); $('#unavailability-provider').trigger('change');
$('#unavailability-start')[0]._flatpickr.setDate(info.start); App.Utils.UI.setDateTimePickerValue($('#unavailability-start'), info.start);
App.Utils.UI.setDateTimePickerValue($('#unavailability-end'), info.end);
$('#unavailability-end')[0]._flatpickr.setDate(info.end);
messageModal.dispose(); messageModal.dispose();
}, },
@ -1783,8 +1782,11 @@ App.Utils.CalendarTableView = (function () {
$selectProvider.trigger('change'); $selectProvider.trigger('change');
// Preselect time // Preselect time
$('#start-datetime')[0]._flatpickr.setDate(info.start); App.Utils.UI.setDateTimePickerValue($('#start-datetime'), info.start);
$('#end-datetime')[0]._flatpickr.setDate(App.Pages.Calendar.getSelectionEndDate(info)); App.Utils.UI.setDateTimePickerValue(
$('#end-datetime'),
App.Pages.Calendar.getSelectionEndDate(info),
);
messageModal.dispose(); messageModal.dispose();
}, },

6
assets/js/utils/working_plan.js
View File

@ -15,6 +15,8 @@
* This module implements the functionality of working plans. * This module implements the functionality of working plans.
*/ */
App.Utils.WorkingPlan = (function () { App.Utils.WorkingPlan = (function () {
const moment = window.moment;
/** /**
* Class WorkingPlan * Class WorkingPlan
* *
@ -692,10 +694,10 @@ App.Utils.WorkingPlan = (function () {
const $workEnd = $(instance.input).closest('tr').find('.work-end'); 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) { if (startMoment > endMoment) {
$workEnd[0]._flatpickr.setDate(startMoment.add(1, 'hour').toDate()); App.Utils.UI.setDateTimePickerValue($workEnd, startMoment.add(1, 'hour').toDate());
} }
}, },
}); });