https://www.frippislandresort.com/javascripts/js/datepicker.js?v=99

1// QS Datepicker
2if ($('.qs-dates-wrap').length) {
3
4  // Datepicker - Variables
5  var startDate, endDate,
6  	startDateSpan = $('.qs-dates-arrival-date'),
7  	endDateSpan = $('.qs-dates-departure-date'),
8  	arrivalDateInput = $('#arrivalDate'),
9  	departureDateInput = $('#departureDate'),
10  	arrivalDateVal = new Date(arrivalDateInput.val()),
11  	departureDateVal = new Date(departureDateInput.val());
12  var datepicker = {
13  	container: $('.qs-datepicker-wrap'),
14  	dateFormat: 'mm/dd/yy',
15  	dates: [arrivalDateVal, departureDateVal],
16  	status: null,
17  	inputs: {
18  		arrivaldate: arrivalDateInput,
19  		departuredate: departureDateInput
20  	}
21  };
22
23  function clearDatepicker() {
24  	// Clear & Reset the Datepicker Values
25  	$('.qs-dates-group').removeClass('dates-entered');
26  	$('.qs-dates-group-date').text('');
27  	$('#start-date').val('');
28  	$('#end-date').val('');
29  	// Reset Datepicker with Correct Date Values
30  	$('.qs-datepicker-wrap').datepicker('refresh');
31  	$('.qs-datepicker-wrap').datepicker('setDate', null);
32  	datepicker.dates[0] = null;
33  	datepicker.dates[1] = null;
34  	// Set current datepicker state
35  	datepicker.status = null;
36  	// Remove Highlights from days selected
37  	$('.qs-datepicker-wrap td').removeClass('dp-highlight').removeClass('dp-start-date').removeClass('dp-end-date');
38    // Master Reset Class
39    $('.datepicker-reset').removeClass('active');
40    // Modal Reset Button Specific
41    $('.datepicker-reset-btn').addClass('active');
42  }
43
44  // Show Datepicker
45  $('.qs-dates-wrap').on('click', function(){
46    datepicker.container.show();
47	});
48
49  // Close Datepicker
50  $('.datepicker-close').on('click', function(){
51    datepicker.container.hide();
52    return false;
53	});
54
55  // Reset Datepicker
56  $('.datepicker-reset').on('click', function(){
57    clearDatepicker();
58	});
59
60  var calCount = 1;
61  // Default Load for Calendar Count Display
62  if ($(window).outerWidth() > 1025) {
63    // Desktop - Display 2 Calendars
64    var calCount = [1, 2];
65  } else {
66    // Mobile - Display 1 Calendar
67    var calCount = 1;
68  }
69
70  // The Datepicker
71	datepicker.container.datepicker({
72		numberOfMonths: calCount,
73		dateFormat: datepicker.dateFormat,
74		minDate: 0,
75		maxDate: 425,
76		beforeShowDay: function (date) {
77			var highlight = false,
78				currentTime = date.getTime(),
79				selectedTime = datepicker.dates,
80				arrivaldate_date = selectedTime[0] ? new Date(selectedTime[0]) : null,
81				departuredate_date = selectedTime[1] ? new Date(selectedTime[1]) : null,
82				arrivaldate_timestamp,
83				departuredate_timestamp,
84				classes = 'dp-highlight';
85			date.setHours(0);
86			date.setMinutes(0);
87			date.setSeconds(0);
88			date.setMilliseconds(0);
89			currentTime = date.getTime();
90			// Arrival Date / Departure Date
91			if (arrivaldate_date) {
92				arrivaldate_date.setHours(0);
93				arrivaldate_date.setMinutes(0);
94				arrivaldate_date.setSeconds(0);
95				arrivaldate_date.setMilliseconds(0);
96				arrivaldate_timestamp = arrivaldate_date.getTime();
97				startDate = arrivaldate_timestamp;
98			}
99			if (departuredate_date) {
100				departuredate_date.setHours(0);
101				departuredate_date.setMinutes(0);
102				departuredate_date.setSeconds(0);
103				departuredate_date.setMilliseconds(0);
104				departuredate_timestamp = departuredate_date.getTime();
105				endDate = departuredate_timestamp;
106			}

107			if (arrivaldate_timestamp && currentTime == arrivaldate_timestamp) {
108				classes = 'dp-start-date';
109			} else if (departuredate_timestamp && currentTime == departuredate_timestamp) {
110				classes = 'dp-end-date';
111			}
112			// Highlight date range
113			if ((selectedTime[0] && selectedTime[0] == currentTime) || (selectedTime[1] && (currentTime >= selectedTime[0] && currentTime <= selectedTime[1]))) highlight = true;
114			return [true, highlight ? classes : ''];
115		},
116		onSelect: function (dateText) {
117      // Master Reset Class
118      $('.datepicker-reset').addClass('active');
119      // Modal Reset Button Specific
120  		if ($('.datepicker-reset-btn').hasClass('hidden')) {
121        $('.datepicker-reset-btn').removeClass('hidden');
122      }
123
124			var selectedDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, dateText);
125			if (!datepicker.dates[0] || datepicker.dates[1] !== null) {
126				// Choose First Date
127				// Fill dates array with first chosen date
128				datepicker.dates[0] = $.datepicker.parseDate(datepicker.dateFormat, dateText).getTime();
129				datepicker.dates[1] = null;
130				// Set current datepicker state
131				datepicker.status = 'dp-start-date';
132				// Create mouseover for table cell
133				datepicker.container.delegate('.ui-datepicker td', 'mouseover', function () {
134					// If it doesn't have year data (old month or unselectable date)
135					if ($(this).data('year') == undefined) return;
136					// Datepicker state is not in date range select, depart date wasn't chosen, or return date already chosen then exit
137					if (datepicker.status != 'dp-start-date') return;
138					// Get date from hovered cell
139					var hoverDate = $(this).data('year') + '-' + ($(this).data('month') + 1) + '-' + $('a', this).html();
140					// Parse hovered date into milliseconds
141					hoverDate = $.datepicker.parseDate('yy-mm-dd', hoverDate).getTime();
142					datepicker.container.find('td').each(function () {
143						// Compare each table cell if it's date is in date range between selected date and hovered
144						if ($(this).data('year') == undefined) return;
145						var cellDate = $(this).data('year') + '-' + ($(this).data('month') + 1) + '-' + $('a', this).html();
146						// Convert cell date into milliseconds for further comparison
147						cellDate = $.datepicker.parseDate('yy-mm-dd', cellDate).getTime();
148						if ((cellDate >= datepicker.dates[0] && cellDate <= hoverDate) || (cellDate <= datepicker.dates[0] && cellDate >= hoverDate)) {
149							$(this).addClass('dp-highlight');
150						} else {
151							$(this).removeClass('dp-highlight');
152						}
153						// Add/Remove hovered Class on Hover (for styling)
154						datepicker.container.find('.ui-datepicker td').hover(
155							function () { $(this).addClass('hover'); },
156							function () { $(this).removeClass('hover'); }
157						);
158					});
159				});
160				startDateSpan.text(dateText);
161				datepicker.inputs.arrivaldate.val(dateText);
162				// Clear End Date when Start Date is selected
163				endDateSpan.parent('.qs-dates-group').removeClass('dates-entered');
164				endDateSpan.text('');
165				// Add .dates-entered class to parent group when Start Date is selected
166				startDateSpan.parent('.qs-dates-group').addClass('dates-entered');
167				//console.log('Start Date Entered');
168			} else if (selectedDate < datepicker.dates[0]) {
169				// If First Date is in the future and Second Date is in the past
170				// Push second date into dates array
171				datepicker.dates[1] = $.datepicker.parseDate(datepicker.dateFormat, dateText).getTime();
172				// Sort array dates
173				datepicker.dates.sort();
174				var arrivalDateDate = $.datepicker.parseDate('@', datepicker.dates[0]);
175				var departureDateDate = $.datepicker.parseDate('@', datepicker.dates[1]);
176				datepicker.status = 'dp-end-date';
177				// Fill input fields
178				datepicker.inputs.arrivaldate.val($.datepicker.formatDate(datepicker.dateFormat, arrivalDateDate));
179				datepicker.inputs.departuredate.val($.datepicker.formatDate(datepicker.dateFormat, departureDateDate)).change();
180				// Populate End Date when Start Date is selected
181				endDateSpan.text(datepicker.inputs.departuredate.val());
182				endDateSpan.parent('.qs-dates-group').addClass('dates-entered');
183				// Populate Start Date when Start Date is selected
184				startDateSpan.text(dateText);
185				//console.log('You are going Backwards! But we got you fam!');
186			} else if (selectedDate <= datepicker.dates[0]) {
187				// Prevent Departure date from being set as same day for Arrival Date
188      	return false;

189				//console.log('You are Selecting the same Arrival and Departure dates! We dont want that!');
190			} else {
191				// Choose Second Date
192				// Push second date into dates array
193				datepicker.dates[1] = $.datepicker.parseDate(datepicker.dateFormat, dateText).getTime();
194				// Sort array dates
195				datepicker.dates.sort();
196				var arrivalDateDate = $.datepicker.parseDate('@', datepicker.dates[0]);
197				var departureDateDate = $.datepicker.parseDate('@', datepicker.dates[1]);
198				datepicker.status = 'dp-end-date';
199				// Fill input fields
200				datepicker.inputs.arrivaldate.val($.datepicker.formatDate(datepicker.dateFormat, arrivalDateDate));
201				datepicker.inputs.departuredate.val($.datepicker.formatDate(datepicker.dateFormat, departureDateDate)).change();
202				// Populate End Date when End Date is selected
203				endDateSpan.text(dateText);
204				// Add .dates-entered class to parent group when Start Date is selected
205				endDateSpan.parent('.qs-dates-group').addClass('dates-entered');
206				// Close Quick Search Modal
207				closeModal('qs-modal');
208				//console.log('End Date Entered');
209			}
210		}
211	});
212}