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

Replace the datepicker of the booking page

Browse source
This commit is contained in:
Alex Tselegidis 2023-02-07 07:39:44 +01:00
parent 5f8f5f5eb2
commit 6deeee0812
3 changed files with 19 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
application/views/layouts/booking_layout.php
View file

@ -15,6 +15,7 @@
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/jquery-ui-dist/jquery-ui.min.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/cookieconsent/cookieconsent.min.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/flatpickr/flatpickr.min.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/themes/' . vars('theme') . '.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/general.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/layouts/booking_layout.css') ?>">
@ -61,6 +62,7 @@
<script src="<?= asset_url('assets/vendor/@fortawesome-fontawesome-free/fontawesome.min.js') ?>"></script>
<script src="<?= asset_url('assets/vendor/@fortawesome-fontawesome-free/solid.min.js') ?>"></script>
<script src="<?= asset_url('assets/vendor/tippy.js/tippy-bundle.umd.min.js') ?>"></script>
<script src="<?= asset_url('assets/vendor/flatpickr/flatpickr.min.js') ?>"></script>
<script src="<?= asset_url('assets/js/app.js') ?>"></script>
<script src="<?= asset_url('assets/js/utils/date.js') ?>"></script>

1
application/views/pages/booking.php
View file

@ -56,6 +56,7 @@
<script src="<?= asset_url('assets/js/utils/message.js') ?>"></script>
<script src="<?= asset_url('assets/js/utils/string.js') ?>"></script>
<script src="<?= asset_url('assets/js/utils/validation.js') ?>"></script>
<script src="<?= asset_url('assets/js/utils/ui.js') ?>"></script>
<script src="<?= asset_url('assets/js/utils/url.js') ?>"></script>
<script src="<?= asset_url('assets/js/http/booking_http_client.js') ?>"></script>
<script src="<?= asset_url('assets/js/pages/booking.js') ?>"></script>

78
assets/js/pages/booking.js
View file

@ -80,75 +80,29 @@ App.Pages.Booking = (function () {
// Initialize page's components (tooltips, datepickers etc).
tippy('[data-tippy-content]');
const weekdayId = App.Utils.Date.getWeekdayId(vars('first_weekday'));
$selectDate.datepicker({
dateFormat: 'dd-mm-yy',
firstDay: weekdayId,
minDate: 0,
defaultDate: moment().toDate(),
dayNames: [
lang('sunday'),
lang('monday'),
lang('tuesday'),
lang('wednesday'),
lang('thursday'),
lang('friday'),
lang('saturday')
],
dayNamesShort: [
lang('sunday').substr(0, 3),
lang('monday').substr(0, 3),
lang('tuesday').substr(0, 3),
lang('wednesday').substr(0, 3),
lang('thursday').substr(0, 3),
lang('friday').substr(0, 3),
lang('saturday').substr(0, 3)
],
dayNamesMin: [
lang('sunday').substr(0, 2),
lang('monday').substr(0, 2),
lang('tuesday').substr(0, 2),
lang('wednesday').substr(0, 2),
lang('thursday').substr(0, 2),
lang('friday').substr(0, 2),
lang('saturday').substr(0, 2)
],
monthNames: [
lang('january'),
lang('february'),
lang('march'),
lang('april'),
lang('may'),
lang('june'),
lang('july'),
lang('august'),
lang('september'),
lang('october'),
lang('november'),
lang('december')
],
prevText: lang('previous'),
nextText: lang('next'),
currentText: lang('now'),
closeText: lang('close'),
onSelect: () => {
App.Http.Booking.getAvailableHours(moment($selectDate[0]._flatpickr.selectedDates[0]).format('YYYY-MM-DD'));
App.Utils.UI.initializeDatepicker($selectDate, {
inline: true,
onChange: (selectedDates) => {
App.Http.Booking.getAvailableHours(moment(selectedDates[0]).format('YYYY-MM-DD'));
updateConfirmFrame();
},
onChangeMonthYear: (year, month) => {
const currentDate = new Date(year, month - 1, 1);
onMonthChange: (selectedDates) => {
App.Http.Booking.getUnavailableDates(
$selectProvider.val(),
$selectService.val(),
moment(currentDate).format('YYYY-MM-DD')
moment(selectedDates[0]).format('YYYY-MM-DD')
);
}
});
},
onYearChange: (selectedDates) => {
App.Http.Booking.getUnavailableDates(
$selectProvider.val(),
$selectService.val(),
moment(selectedDates[0]).format('YYYY-MM-DD')
);
},
});
const browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
const isTimezoneSupported = $selectTimezone.find(`option[value="${browserTimezone}"]`).length > 0;