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', 'Wählen Sie Eincheckdatum aus');
// APPEARS IN THE CALENDAR MODAL FOOTER
$('.default-top').html('Bitte wählen Sie einen Zeitraum zwischen 1 und 60 Nächten');
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
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 "Januar"; break;
case 2: return "Februar"; break;
case 3: return "März"; break;
case 4: return "April"; break;
case 5: return "Mai"; break;
case 6: return "Juni"; break;
case 7: return "Juli"; break;
case 8: return "August"; break;
case 9: return "September"; break;
case 10: return "Oktober"; break;
case 11: return "November"; break;
case 12: return "Dezember"; 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 "Mär"; break;
case 4: return "Apr"; break;
case 5: return "Mai"; break;
case 6: return "Jun"; break;
case 7: return "Jul"; break;
case 8: return "Aug"; break;
case 9: return "Sep"; break;
case 10: return "Okt"; break;
case 11: return "Nov"; break;
case 12: return "Dez"; break;
}
}
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
DATERANGEPICKER - CONFIGURATION OBJECT
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
var configObject = {
startOfWeek: 'monday',
// arrival: "Ankunft: ",
// selected: "Selected",
// separator : ' ➜ ',
separator: ' — ',
format: 'DD MMM',
// format: 'DD-MM-YYYY',
// format: 'ddd, Do MMM, GGGG',
startDate: '04-04-2025',
minDays: 2,
maxDays: 60,
time: {
enabled: false
},
stickyMonths: true,
autoClose: true,
language: 'de', // 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 = ['', 'Bitte wählen Sie das Abreisedatum', '1 Nacht'];
if (hoverMessageArray[days]) {
return hoverMessageArray[days];
} else {
// THE NIGHTS ARE ALWAYS ONE LESS THAN THE SELECTED PERIOD IN DAYS
return days-1 + ' Nächte';
}
},
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', 'Wählen Sie Auscheckdatum aus'); // 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', 'Wählen Sie Eincheckdatum aus');
$('.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);
});
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
});
-->
Wir bieten außergewöhnliche Gastfreundschaft, unschlagbare Lagen, tadellose Einrichtungen und raffinierte Restaurants. Unsere Konzepthotels in Athen und Rhodos sowie in naher Zukunft in Thessaloniki und ganz Griechenland heben Ihr Urlaubserlebnis auf ein völlig neues Niveau.
