DISPLAY / HIDE THE DESTINATIONS PANEL ================================================================================ */ $('#destinationSelectorToggle, .destinationTitleBackButton').on('click', function() { if (destinationToggleFunctional == 'yes') { if ($('#destinationSelectionPanel').is(':visible')) { hideDestinationSelectionPanel(); } else { displayDestinationSelectionPanel(); } } }); /* ================================================================================ CLICK ANYWHERE OUTSIDE THE DESTINATION PANEL, OR THE DESTINATIONS SELECTION TOGGLE --> HIDE THE DESTINATIONS PANEL ================================================================================ */ $(document).mouseup(function(event) { if (viewportWidth > 800) { // FOR DESKTOPS ONLY var toggle = $('#destinationSelectorToggle'); var panel = $('#destinationSelectionPanel'); if (!toggle.is(event.target) && toggle.has(event.target).length === 0 && !panel.is(event.target) && panel.has(event.target).length === 0) { hideDestinationSelectionPanel(); } } }); /* ================================================================================ ON SELECTING A LOCATION OR HOTEL ================================================================================ */ $('.destinationSelection').on('click', function() { var locationCode = $(this).attr('data-location'); var hotelCode = $(this).attr('data-hotel'); webHoteliersURL = $(this).attr('data-actionURL'); var adultsOnly = $(this).attr('data-adultsOnly'); // THE DATA-LOCATION "ignore" DENOTES THAT NO ACTION SHOULD BE TAKEN - IN CASE WE ONLY WANT TO PLACE A MERE HEADING if (locationCode != 'ignore') { // REMOVE ANY "SELECTED" FORMAT (HIGHLIGHTING) FROM ALL DESTINATIONS $('.destinationSelection').removeClass('selectedDestinationFormat'); // CHANGE THE FORMAT (HIGHLIGHTING) OF THE SELECTED DESTINATION SO IT IS VIEWED AS "SELECTED" $(this).addClass('selectedDestinationFormat'); // UPDATE THE HIDDEN "#inputLocation" INPUT FIELD WITH THE SELECTED LOCATION CODE $('#inputLocation').val(locationCode); // UPDATE THE HIDDEN "#inputHotel" INPUT FIELD WITH THE SELECTED HOTEL CODE $('#inputHotel').val(hotelCode); // SHOW / HIDE FROM THE GUESTS SELECTION PANEL THE CHOICES FOR CHILDREN AND BABIES ACCORDINGLY switch (adultsOnly) { case 'yes': $('#childrenSelectionContainer, #babiesSelectionContainer').hide(); $('#childrenDisplay, #babiesDisplay').hide(); $('#inputChildrenNumber, #inputBabiesNumber').val(0); $('#childrenNumber, #babiesNumber').html(0); $('#childrenPlusSign, #babiesPlusSign').removeClass('opacity20'); $('#childrenMinusSign, #babiesMinusSign').addClass('opacity20'); break; default: $('#childrenSelectionContainer, #babiesSelectionContainer').show(); break; } $('#destinationSelectTitle').html($(this).attr('data-fullName')).css({ 'color': 'var(--textColor)', 'font-weight': 'bold' }); hideDestinationSelectionPanel(); $('form#formBooking').attr('action', webHoteliersURL); // SET THE FORM'S ACTION URL destinationSelectionCompleted = 'yes'; // bookingFormSubmitStatus(); } }); /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% GUESTS SELECTION %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* ================================================================================ FUNCTION - DISPLAY GUESTS SELECTION POPUP PANEL ================================================================================ */ function displayGuestsPanel() { $('.selectGuestsArrow').removeClass('fa-angle-down').addClass('fa-angle-up'); $('.selectionPanel').slideUp(slideTime); // CLOSE ANY OTHER OPEN PANEL $('#guestsSelectionPanel').slideDown(slideTime); scrollPanel(slideTime, '#guestsSelectionPanel'); // SCROLL PAGE TO MAKE THE POPUP PANEL FULLY VISIBLE // THE GUEST PANEL RESIDES WITHIN A FLEX ELEMENT AND THEREFORE ITS "POSITION: FIXED" DOES NOT WORK // FROM THE BROWSER TOP BUT ONLY FROM THE ANCESTOR ELEMENTS' TOP if (viewportWidth <= 800) { $('#container, #header1BookingForm').css({ 'inset-block-start': 0, 'z-index': 1000, 'width': '100vw', 'height': '100vh', 'padding-block-end': 0 }); $('#header1BookingForm').css('transform', 'initial'); $('div#mobileBookNowToggleContainer').hide(); // fullScreenBookingOpen = 'yes'; } } /* ================================================================================ FUNCTION - HIDE GUESTS SELECTION POPUP PANEL ================================================================================ */ function hideGuestsSelectionPanel() { $('.selectGuestsArrow').removeClass('fa-angle-up').addClass('fa-angle-down'); $('#guestsSelectionPanel').slideUp(slideTime); // REVERT WHAT WAS CHANGED ABOVE if (fullScreenBookingOpen == 'no') { $('#container, #header1BookingForm').css({ 'inset-block-start': 'initial', 'z-index': 1000, 'width': 'inherit', 'height': 'initial', 'padding-block-end': 'initial' }); if (viewportWidth <= 800) { $('#header1BookingForm').css('transform', 'translateX(-50%)'); } } } /* ================================================================================ FUNCTION - SET GUESTS SELECTION PANEL'S TRIANGLE POSITION ================================================================================ */ function adjustGuestsPanelTrianglePosition() { // THE DESTINATIONS SELECTOR TOGGLE'S WIDTH var guestsSelectorToggleWidth = $('#guestsSelectorToggle').outerWidth(); // THE DISTANCE OF DESTINATIONS SELECTOR TOGGLE'S CENTER FROM PAGE LEFT var triangleDistanceFromLeft = guestsSelectorToggleWidth / 2; // SET THE TRIANGLE'S INLINE POSITION ABOVE THE DESTINATION SELECTOR PANEL $('#guestsSelectionPanel').css('--triangleDistanceFromLeft', triangleDistanceFromLeft + 'px'); } adjustGuestsPanelTrianglePosition(); /* ================================================================================ ADJUST GUEST SELECTION PANEL'S TRIANGLE POSITION ON PAGE LOAD, PAGE SCROLL, OR WINDOW RESIZE ================================================================================ */ $(window).on('load resize scroll', function(e) { adjustGuestsPanelTrianglePosition(); }); /* ================================================================================ CLICK ON GUESTS SELECTION TOGGLE --> DISPLAY / HIDE THE GUESTS SELECTION PANEL ================================================================================ */ $('#guestsSelectorToggle, .guestsTitleBackButton').on('click', function() { if($('#guestsSelectionPanel').is(':visible')) { hideGuestsSelectionPanel(); } else { displayGuestsPanel(); } }); /* ================================================================================ CLICK ANYWHERE OUTSIDE THE GUESTS SELECTION PANEL, OR THE GUESTS SELECTION TOGGLE --> HIDE THE GUESTS SELECTION PANEL ================================================================================ */ $(document).mouseup(function(event) { if (viewportWidth > 800) { // FOR DESKTOPS ONLY var toggle = $('#guestsSelectorToggle'); var panel = $('#guestsSelectionPanel'); if (!toggle.is(event.target) && toggle.has(event.target).length === 0 && !panel.is(event.target) && panel.has(event.target).length === 0) { hideGuestsSelectionPanel(); } } }); /* ================================================================================ ADULTS INCREASE ================================================================================ */ $('#adultsPlusSign').on('click', function() { var maxAdultsNumber = parseInt($('#maxAdultsNumber').val(), 10); var numOfAdults = parseInt($('#adultsNumber').attr('data-value'), 10); if (numOfAdults < maxAdultsNumber) { numOfAdults = numOfAdults + 1; $('#adultsNumber').attr('data-value', numOfAdults).html(numOfAdults); $('#adultsMinusSign').removeClass('opacity20'); } if (numOfAdults >= maxAdultsNumber) { $('#adultsPlusSign').addClass('opacity20'); } }); /* ================================================================================ ADULTS DECREASE ================================================================================ */ $('#adultsMinusSign').on('click', function() { var minAdultsNumber = parseInt($('#minAdultsNumber').val(), 10); var numOfAdults = parseInt($('#adultsNumber').attr('data-value'), 10); if (numOfAdults > minAdultsNumber) { numOfAdults = numOfAdults - 1; $('#adultsNumber').attr('data-value', numOfAdults).html(numOfAdults); $('#adultsPlusSign').removeClass('opacity20'); } if (numOfAdults <= minAdultsNumber) { $('#adultsMinusSign').addClass('opacity20'); } }); /* ================================================================================ CHILDREN INCREASE ================================================================================ */ $('#childrenPlusSign').on('click', function() { var maxChildrenNumber = parseInt($('#maxChildrenNumber').val(), 10); var numOfChildren = parseInt($('#childrenNumber').attr('data-value'), 10); if (numOfChildren < maxChildrenNumber) { numOfChildren = numOfChildren + 1; $('#childrenNumber').attr('data-value', numOfChildren).html(numOfChildren); $('#childrenMinusSign').removeClass('opacity20'); } if (numOfChildren >= maxChildrenNumber) { $('#childrenPlusSign').addClass('opacity20'); } }); /* ================================================================================ CHILDREN DECREASE ================================================================================ */ $('#childrenMinusSign').on('click', function() { var minChildrenNumber = parseInt($('#minChildrenNumber').val(), 10); var numOfChildren = parseInt($('#childrenNumber').attr('data-value'), 10); if (numOfChildren > minChildrenNumber) { numOfChildren = numOfChildren - 1; $('#childrenNumber').attr('data-value', numOfChildren).html(numOfChildren); $('#childrenPlusSign').removeClass('opacity20'); } if (numOfChildren <= minChildrenNumber) { $('#childrenMinusSign').addClass('opacity20'); } }); /* ================================================================================ BABIES INCREASE ================================================================================ */ $('#babiesPlusSign').on('click', function() { var maxBabiesNumber = parseInt($('#maxBabiesNumber').val(), 10); var numOfBabies = parseInt($('#babiesNumber').attr('data-value'), 10); if (numOfBabies < maxBabiesNumber) { numOfBabies = numOfBabies + 1; $('#babiesNumber').attr('data-value', numOfBabies).html(numOfBabies); $('#babiesMinusSign').removeClass('opacity20'); } if (numOfBabies >= maxBabiesNumber) { $('#babiesPlusSign').addClass('opacity20'); } }); /* ================================================================================ BABIES DECREASE ================================================================================ */ $('#babiesMinusSign').on('click', function() { var minBabiesNumber = parseInt($('#minBabiesNumber').val(), 10); var numOfBabies = parseInt($('#babiesNumber').attr('data-value'), 10); if (numOfBabies > minBabiesNumber) { numOfBabies = numOfBabies - 1; $('#babiesNumber').attr('data-value', numOfBabies).html(numOfBabies); $('#babiesPlusSign').removeClass('opacity20'); } if (numOfBabies <= minBabiesNumber) { $('#babiesMinusSign').addClass('opacity20'); } }); /* ================================================================================ APPLY GUESTS SELECTIONS TO THE GUESTS FIELD ================================================================================ */ $('#guestsSelectionSubmitButton').on('click', function() { var numOfAdults = parseInt($('#adultsNumber').html(), 10); var numOfChildren = parseInt($('#childrenNumber').html(), 10); var numOfBabies = parseInt($('#babiesNumber').html(), 10); $('#guestsSelectTitle').hide(); $('.guestsInput').css({ 'display': 'flex', 'color': 'var(--textColor)', 'font-weight': 'bold' }); hideGuestsSelectionPanel(); guestsSelectionCompleted = 'yes'; // bookingFormSubmitStatus(); // $('.selectGuestsArrow').removeClass('fa-angle-up').addClass('fa-angle-down'); /* -------------------------------------------------------------------------------- DISPLAY NUMBER OF ADULTS -------------------------------------------------------------------------------- */ $('#numberOfAdults').html(numOfAdults); /* -------------------------------------------------------------------------------- DISPLAY NUMBER OF CHILDREN -------------------------------------------------------------------------------- */ if (parseInt(numOfChildren) > 0) { $('#numberOfChildren').html(numOfChildren); $('#childrenDisplay').show(); } else { $('#childrenDisplay').hide(); } /* -------------------------------------------------------------------------------- DISPLAY NUMBER OF BABIES IF MORE THAN 0 -------------------------------------------------------------------------------- */ if (parseInt(numOfBabies) > 0) { $('#numberOfBabies').html(numOfBabies); $('#babiesDisplay').show(); } else { $('#babiesDisplay').hide(); } /* -------------------------------------------------------------------------------- HIDE THE ".plusSign" ELEMENTS IF NO CHILDREN AND BABIES WERE SELECTED, AND THE REVERSE -------------------------------------------------------------------------------- */ if ((numOfChildren > 0) || (numOfBabies > 0)) { $('.plusSign').css('display', 'inline-block'); } else { $('.plusSign').hide(); } /* -------------------------------------------------------------------------------- */ $('#inputAdultsNumber').val(numOfAdults); $('#inputChildrenNumber').val(numOfChildren); $('#inputBabiesNumber').val(numOfBabies); $('#guestsSelectionPanel').slideUp(slideTime); }); /* ================================================================================ */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +PROMO CODE %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ $('#promoCodeTitle').on('click', function() { if ($('#promoCodeInputField').is(':hidden')) { $('#promoCodeTitle').css('font-size', '9px'); $('#promoCodeInputField').show(); } else { $('#promoCodeTitle').css('font-size', ''); $('#promoCodeInputField').hide(); } }); /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% CALENDAR - DATERANGEPICKER %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% SETUP GLOBAL VARIABLES %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ var checkInDate; var checkInMonthName; var checkOutDate; var checkOutMonthName; /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% HIDE CALENDAR PANEL IF VISIBLE AND ON CLICKING THE CALENDAR TOGGLE, OR THE CHEVRON LEFT BUTTON FOR MOBILE %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ $('#datesSelectorToggle, #calendarPanelCloseMobile').on('click', function() { if($('.date-picker-wrapper').is(':visible')) { $('.date-picker-wrapper').slideUp(slideTime); $('.selectDatesArrow').removeClass('fa-angle-up').addClass('fa-angle-down'); $('#calendarPanelCloseMobile').hide(); // THE CHEVRON LEFT IN MOBILE } }); /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% SET INITIAL MESSAGE IN DATERANGEPICKER'S TOP AREA %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ // APPEARS IN THE CALENDAR MODAL HEADER - THE "data-select" ATTRIBUTE IS INSERTED IN THE ELEMENT'S ":BEFORE" CONTENT: $('.date-picker-wrapper').attr('data-select', 'Select check in date'); // APPEARS IN THE CALENDAR MODAL FOOTER $('.default-top').html('Please select period between 1 and 60 nights'); /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% FUNCTION - SET CALENDAR PANEL'S POSITION IN THE DOCUMENT - RIGHT BELOW THE CHECK IN AND CHECK OUT FIELDS %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ function adjustCalendarPanelPosition() { // FIND THE "CHOOSE DATES" FIELD'S DISTANCE FROM PAGE TOP, AND THE FIELD'S HEIGHT // CALENDAR TOGGLE'S DISTANCE FROM TOP var bookFormTopDistance = $('#bookForm').offset().top; // BOOKING FORM'S DISTANCE FROM TOP var bookFormHeight = $('#bookForm').outerHeight(true); // BOOKING FORM'S HEIGHT // THE DISTANCE OF CALENDAR PANEL'S TOP FROM BROWSER TOP var calendarPanelDistanceFromPageTop = bookFormTopDistance + bookFormHeight + 5; // CALCULATE THE VIEPORT'S MIDDLE POINT var halfViewportWidth = $(window).width() / 2; // SET THE CALENDAR PANEL'S POSITION $('.date-picker-wrapper').css({ 'inset-block-start': calendarPanelDistanceFromPageTop + 10 + 'px', 'inset-inline-start': halfViewportWidth + 'px', 'transform': 'translateX(-50%)' }); /* ================================================================================ SET THE POSITION OF THE LITTLE TRIANGLE ABOVE THE CALENDAR PANEL ================================================================================ */ // FIND THE "CHOOSE DATES" FIELD'S DISTANCE FROM PAGE LEFT, AND THE FIELD'S WIDTH, var datesSelectorToggleLeftDistance = $('#datesSelectorToggle').offset().left; var datesSelectorToggleWidth = $('#datesSelectorToggle').outerWidth(); // FIND THE CALENDAR PANEL'S DISTANCE FROM PAGE LEFT var calendarPanelLeftDistance = $('.date-picker-wrapper').offset().left; // CALCULATE THE DISTANCE OF THE "CHOOSE DATES" FIELD'S CENTER FROM CALENDAR PANEL'S LEFT EDGE var datesSelectorToggleCenterDistanceFromPageLeft = datesSelectorToggleLeftDistance + (datesSelectorToggleWidth / 2) - calendarPanelLeftDistance; // SET THE TRIANGLE'S INLINE POSITION ABOVE THE CALENDAR PANEL $('.date-picker-wrapper').css('--triangleDistanceFromLeft', datesSelectorToggleCenterDistanceFromPageLeft + 'px'); } /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% ADJUST CALENDAR PANEL ON PAGE LOAD, PAGE SCROLL, OR WINDOW RESIZE %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ $(window).on('load resize scroll', function(e) { adjustCalendarPanelPosition(); }); /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% FUNCTION - TURN A GIVEN MONTH NUMBER INTO A TEXT NAME %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ function monthNumberToName(monthNum) { switch(monthNum) { case 1: return "January"; break; case 2: return "February"; break; case 3: return "March"; break; case 4: return "April"; break; case 5: return "May"; break; case 6: return "June"; break; case 7: return "July"; break; case 8: return "August"; break; case 9: return "September"; break; case 10: return "October"; break; case 11: return "November"; break; case 12: return "December"; break; } } /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% FUNCTION - TURN A GIVEN MONTH NUMBER INTO A TEXT ABBREVIATION %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ function monthNumberToNameAbbr(monthNum) { switch(monthNum) { case 1: return "Jan"; break; case 2: return "Feb"; break; case 3: return "Mar"; break; case 4: return "Apr"; break; case 5: return "May"; break; case 6: return "Jun"; break; case 7: return "Jul"; break; case 8: return "Aug"; break; case 9: return "Sep"; break; case 10: return "Oct"; break; case 11: return "Nov"; break; case 12: return "Dec"; break; } } /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% DATERANGEPICKER - CONFIGURATION OBJECT %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ var configObject = { startOfWeek: 'monday', // arrival: "Arrival: ", // selected: "Selected", // separator : ' ➜ ', separator: ' — ', format: 'DD MMM', // format: 'DD-MM-YYYY', // format: 'ddd, Do MMM, GGGG', startDate: '26-03-2025', minDays: 2, maxDays: 60, time: { enabled: false }, stickyMonths: true, autoClose: true, language: 'en', // en: ENGLISH, de: GERMAN, el: GREEK, ru: RUSSIAN, pl: POLISH, fr: FRENCH, it: ITALIAN selectForward: true, hoveringTooltip: function(days) { // FOR 0 DAYS SELECTION SHOW NOTHING - ARRAY VALUE [0], // FOR 1 DAY SELECTION ASK FOR CHECKOUT DATE SELECTION - ARRAY VALUE[1], // FOR 2 DAYS SELECTION REPORT 1 NIGHT (THE CHECKOUT DAY DOES NOT COUNT) - ARRAY VALUE[2] var hoverMessageArray = ['', 'Please select Check Out date', '1 night']; if (hoverMessageArray[days]) { return hoverMessageArray[days]; } else { // THE NIGHTS ARE ALWAYS ONE LESS THAN THE SELECTED PERIOD IN DAYS return days-1 + ' nights'; } }, getValue: function() { if ($('#checkinDisplayDate').val() && $('#checkoutDisplayDate').val() ) { return $('#checkinDisplayDate').val() + ' - Departure ' + $('#checkoutDisplayDate').val(); } else { return ''; } }, setValue: function(s,s1,s2) { console.log('S = ' + s + ', S1 = ' + s1 + ', S2 = ' + s2); // s = START-DATE SEPARATOR END-DATE // s1 = START DATE // s2 = END DATE $('#checkIn').val(s1); $('#checkOut').val(s2); }, monthSelect: false, yearSelect: false, singleMonth: false, }; /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% DATERANGEPICKER %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ // https://longbill.github.io/jquery-date-range-picker/ /* THE "JASON.stringify()" FUNCTION RETURNS A DATE AT THE UTC TIMEZONE WHICH MAY BE YESTERDAY'S OR TOMORROW'S DATE AT THE USER'S LOCAL TIMEZONE. TO REMEDY THE PROBLEM WE USE A "MOMENT" OBJECT FROM THE DATE (AS PER CODE LINE BELOW) AND USE THAT MOMENT'S FORMAT FUNCTION WITHOUT PARAMETERS, WHICH EMITS THE ISO8601 EXTENDED FORMAT INCLUDING THE TIMEZONE OFFSET, AFFECTING ALL "DATE" OBJECTS. TO FOCUS THE REMEDY TO CERTAIN DATES ONLY, WE MAY USE THE "toJSON" FUNCTION INSTEAD, AS PER THE TWO COMMENTED OUT LINES BELOW */ Date.prototype.toJSON = function() { return moment(this).format(); } // obj.date1.toJSON = function(){ return moment(this).format(); } // obj.date2.toJSON = function(){ return moment(this).format(); } $('#datesSelectorToggle.selectorToggle').dateRangePicker(configObject) /* ================================================================================ THE EVENT BELOW IS TRIGGERED WHEN THE FIRST DATE IS SELECTED ================================================================================ */ .on('datepicker-first-date-selected', function(event, obj) { // obj will be something like this: // { // date1: (Date object of the earlier date) // } console.log('first-date-selected', obj); // $('#dateIn').css('background-color', 'white'); // $('#dateOut').css('background-color', '#efc2cd'); $('#datesSelectTitle').hide(); $('.dateInput').css('display', 'flex'); $('#departureDay').attr('data-value', '').html(''); $('#departureMonth').attr('data-value', '').html(''); // CONVERT JSON OBJECT INTO A STRING AND PARSE STRING INTO A JAVASCRIPT OBJECT var myObject = JSON.parse(JSON.stringify(obj)); // GET CHECK-IN DATE ELEMENT FROM OBJECT var checkInDateString = myObject.date1; var fullDateIn = new Date(checkInDateString); console.log('fullDateIn = ' + fullDateIn); var dateDay = fullDateIn.getDate(); var dateMonth = fullDateIn.getMonth() + 1; var dateYear = fullDateIn.getFullYear(); checkInDate = dateDay + '-' + dateMonth + '-' + dateYear; // checkInMonthName = monthNumberToName(parseInt(dateMonth)); // FIND MONTH'S TEXT NAME var checkInMonthAbbrName = monthNumberToNameAbbr(parseInt(dateMonth)); // FIND MONTH'S ABBREVIATED TEXT NAME $('#arrivalDay').html(dateDay); $('#arrivalMonth').html(checkInMonthAbbrName); // $('#checkIn').attr('value', checkInDate); $('#inputCheckinDate').attr('value', checkInDate); $('#departureDay').html(' '); // DELETE THE DISPLAYED CHECKOUT DAY $('#departureMonth').html(' '); // DELETE THE DISPLAYED CHECKOUT MONTH // $('#checkOut').attr('value', ''); $('#inputCheckoutDate').attr('value', ''); $('#inputNightsPeriod').attr('value', '1'); // RESET NUMBER OF NIGHTS TO "1" UNTIL A CHECKOUT DATE IS SELECTED $('.date-picker-wrapper').attr('data-select', 'Select check out date'); // CHANGE THE TITLE APPEARING AT THE TOP OF THE CALENDARS }) /* ================================================================================ THE EVENT BELOW IS TRIGGERED WHEN THE SECOND DATE IS SELECTED ================================================================================ */ .on('datepicker-change', function(event,obj) { // obj will be something like this: // { // date1: (Date object of the earlier date), // date2: (Date object of the later date), // value: "2013-06-05 to 2013-06-07" // } console.log('change',obj); // CONVERT OBJECT INTO A STRING AND PARSE STRING INTO A JAVASCRIPT OBJECT var myObject = JSON.parse(JSON.stringify(obj)); // GET CHECK-IN DATE ELEMENT FROM OBJECT var checkInDateString = myObject.date1; var fullDateIn = new Date(checkInDateString); console.log('fullDateIn = ' + fullDateIn); var dateDay = fullDateIn.getDate(); var dateMonth = fullDateIn.getMonth() + 1; var dateYear = fullDateIn.getFullYear(); var checkInDatum = new Date(dateYear, dateMonth-1, dateDay); // GET CHECK-OUT DATE ELEMENT FROM OBJECT var checkOutDateString = myObject.date2; var fullDateOut = new Date(checkOutDateString); var dateDay = fullDateOut.getDate(); var dateMonth = fullDateOut.getMonth() + 1; var dateYear = fullDateOut.getFullYear(); var checkOutdatum = new Date(dateYear, dateMonth-1, dateDay); checkOutDate = dateDay + '-' + dateMonth + '-' + dateYear; // checkOutMonthName = monthNumberToName(parseInt(dateMonth)); // FIND MONTH'S TEXT NAME var checkOutMonthAbbrName = monthNumberToNameAbbr(parseInt(dateMonth)); // FIND MONTH'S ABBREVIATED TEXT NAME $('#departureDay').html(dateDay); $('#departureMonth').html(checkOutMonthAbbrName); $('#inputCheckoutDate').attr('value', checkOutDate); var oneDay = 24 * 60 * 60 * 1000 // HOURS * MINUTES * SECONDS * MILLISECONDS nights = Math.round(Math.abs((checkOutdatum.getTime() - checkInDatum.getTime()) / (oneDay))); $('#inputNightsPeriod').attr('value', nights); $('span.selected-days-num').html(nights); datesSelectionCompleted = 'yes'; // bookingFormSubmitStatus(); $('.dateInput').css({ 'color': 'var(--textColor)', 'font-weight': 'bold' }); // HIDE THE CHEVRON LEFT AT TOP OF MOBILE CALENDAR PANEL $('#calendarPanelCloseMobile').hide(); // THE CHEVRON LEFT IN MOBILE }) /* ================================================================================ THIS EVENT WILL BE TRIGGERED BEFORE DATE RANGE PICKER OPEN ANIMATION ================================================================================ */ .on('datepicker-open', function() { console.log('before open'); scrollPanel(slideTime, '.date-picker-wrapper.two-months'); // SCROLL PAGE TO MAKE THE POPUP PANEL FULLY VISIBLE checkInDate = $('#inputCheckinDate').val(); if (checkInDate != '') { var dateInArray = checkInDate.split('-'); checkOutDate = $('#inputCheckoutDate').val(); if (checkOutDate != '') { var dateOutArray = checkOutDate.split('-'); // $('#dateIn').css('background-color', '#edeef2'); var checkInDatum = new Date(Date.UTC(dateInArray[2], dateInArray[1]-1, dateInArray[0], 0, 0, 0)); var checkOutdatum = new Date(Date.UTC(dateOutArray[2], dateOutArray[1]-1, dateOutArray[0], 0, 0, 0)); var oneDay = 24 * 60 * 60 * 1000 // HOURS * MINUTES * SECONDS * MILLISECONDS var nights = Math.round(Math.abs((checkOutdatum.getTime() - checkInDatum.getTime()) / (oneDay))); } else { // $('#dateOut').css('background-color', 'rgb(239, 194, 205)'); var nights = 1; } } $('span.selected-days-num').html(nights); // CHANGE THE TITLE APPEARING AT THE TOP OF THE CALENDARS $('.date-picker-wrapper').attr('data-select', 'Select check in date'); $('.selectDatesArrow').removeClass('fa-angle-down').addClass('fa-angle-up'); // HIDE POSSIBLY OPEN DESTINATION SELECTION OR GUESTS SELECTION PANELS hideDestinationSelectionPanel(); hideGuestsSelectionPanel(); // DISPLAY THE CHEVRON LEFT BUTTON AT THE CALENDAR TOP - MOBILE var viewportWidth = $(window).width(); if (viewportWidth <= 800) { $('#calendarPanelCloseMobile').show(); } }) /* ================================================================================ THIS EVENT WILL BE TRIGGERED AFTER DATE RANGE PICKER OPEN ANIMATION ================================================================================ */ .on('datepicker-opened', function() { console.log('after open'); adjustCalendarPanelPosition(); }) /* ================================================================================ THIS EVENT WILL BE TRIGGERED BEFORE DATE RANGE PICKER CLOSE ANIMATION ================================================================================ */ .on('datepicker-close', function() { console.log('before close'); $('.selectDatesArrow').removeClass('fa-angle-up').addClass('fa-angle-down'); }) /* ================================================================================ THIS EVENT WILL BE TRIGGERED AFTER DATE RANGE PICKER CLOSE ANIMATION ================================================================================ */ .on('datepicker-closed', function() { console.log('after close'); }) /* ================================================================================ THIS EVENT WILL BE TRIGGERED WHEN USER CLICKS ON THE APPLY BUTTON ================================================================================ */ .on('datepicker-apply', function(event,obj) { console.log('apply',obj); }); /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ }); -->