https://viewhotels.com.au/wp-content/themes/view-hotels/assets/js/…/dist/voyager-daterange.js?ver=1776847968

1const daterange_datepicker = document.querySelectorAll('.js-daterange');
2class Daterange {
3	constructor() {
4		this.lang = document.documentElement.lang;
5	}
6
7	datepicker_selector() {
8		var _self = this
9		daterange_datepicker.forEach(e => {
10			_self.init_datepicker(e);
11			let card_checkin = e.querySelector('.js-card-checkin'),
12				input_checkin = e.querySelector('.js-card-input-checkin'),
13				card_checkout = e.querySelector('.js-card-checkout'),
14				input_checkout = e.querySelector('.js-card-input-checkout');
15
16			const todaysDate = new Date();
17			let tomorrowsDate = new Date();
18			tomorrowsDate.setDate(todaysDate.getDate() + 1);
19			this.buildDateCard(card_checkin, todaysDate);
20			this.buildDateCard(card_checkout, tomorrowsDate);
21
22			_self.open_calander(card_checkin, input_checkin);
23			_self.open_calander(card_checkout, input_checkout);
24			_self.target_checkout(e);
25		});
26	}
27
28	change_date(input_class) {
29		input_class.addEventListener('changeDate', function (e) {
30			_self.remove_dropdown_class();
31		})
32	}
33
34	target_checkout(elem) {
35		var _self = this;
36		let hub_input = elem.querySelectorAll('.js-card-input');
37		for (let hub_item = 0; hub_item < hub_input.length; hub_item++) {
38			hub_input[hub_item].addEventListener('changeDate', function (evt) {
39				let { inputs } = evt.detail.datepicker.rangepicker,
40					dateRangeStartDate = inputs[0],
41					dateRangeEndDate = inputs[1],
42					newDate;
43				if (evt.target == dateRangeStartDate) {
44					setTimeout(() => {
45						dateRangeStartDate.datepicker.setDate(evt.detail.date);
46						var date = evt.detail.date,
47							startDateOnMili = date.getTime();
48
49						if (startDateOnMili != '') {
50							_self.hoverdateRange(startDateOnMili);
51						}
52
53						if (dateRangeEndDate.value == '') {
54							dateRangeEndDate.datepicker.setDate(date.setDate(date.getDate() + 1));
55							newDate = date.getDate();
56						} else {
57							newDate = date.getDate() + 1;
58						}
59
60						if (dateRangeStartDate.value == dateRangeEndDate.value) {
61							dateRangeEndDate.datepicker.setDate(date.setDate(date.getDate() + 1));
62						}
63
64						dateRangeEndDate.datepicker.show();
65						dateRangeEndDate.datepicker.setOptions({
66							minDate: date.setDate(newDate)
67						});
68					}, 50);
69				}
70				_self.buildDateCard(hub_input[hub_item].parentElement, evt.detail.date);
71			});
72		}
73	}
74
75	hoverdateRange(startDateOnMili) {
76		var _self = this;
77		daterange_datepicker.forEach(e => {
78			let card_checkout = e.querySelector('.js-card-checkout'),
79				items = card_checkout.querySelectorAll('.datepicker__span');
80			for (const item of items) {
81				item.addEventListener('mouseover', function (e) {
82					let hoverDateOnMili = item.dataset.date;
83					_self.addHoverClass(startDateOnMili, hoverDateOnMili, items);
84				})
85			}
86		});
87	}
88
89	addHoverClass(startDateOnMili, hoverDateOnMili, items) {
90		for (const item of items) {
91			let dateOnMili = item.dataset.date
92			if (dateOnMili >= startDateOnMili && dateOnMili <= hoverDateOnMili) {
93				item.classList.add('datepicker--highlight');
94			} else {
95				item.classList.remove('datepicker--highlight');
96			}
97
98		}
99	}
100
101	buildDateCard(type, date) {
102		var _self = this;
103		const newCardDate = new Date(date);
104		const newCardDay = newCardDate.toLocaleString('default', { day: '2-digit' });
105		const newCardMonth = newCardDate.toLocaleString(_self.lang, { month: '2-digit' });
106		const newCardYear = newCardDate.toLocaleString('default', { year: 'numeric' });
107		// let month = type.querySelector('.js-date-month');
108		// let day = type.querySelector('.js-date-day');
109		// let year = type.querySelector('.js-date-year');
110		let fullDate = type.querySelector('.js-date-fulldate');
111		// month.innerHTML = newCardDay +' '+ newCardMonth +' '+ newCardYear; 
112		fullDate.innerHTML = newCardDay +'/'+ newCardMonth +'/'+ newCardYear;      
113		// month.innerHTML = newCardMonth;
114		// day.innerHTML = newCardDay;
115		// if (typeof (year) != 'undefined' && year != null) {
116		// 	year.innerHTML = newCardYear;
117		// }
118	}
119
120	open_calander(click_class, input_class) {
121		click_class.addEventListener('click', function () {
122			input_class.focus();
123		});
124	}
125
126	init_datepicker(elem) {
127		var _self = this;
128		const today = new Date();
129		const dateOptionsRange = {
130			maxView: 1,
131			minDate: today, // no dates available before today
132			autohide: true,
133			todayHighlight: true,
134			format: 'yyyy-mm-dd',
135			allowOneSidedRange: true,
136			nextArrow: '',
137			prevArrow: '',
138			allowOneSidedRange: true,
139			language: _self.lang,
140		};
141
142		let datepickerRange = new DateRangePicker(elem, dateOptionsRange);
143	}
144

145	init() {
146		this.datepicker_selector();
147	}
148}
149
150window.Daterange = Daterange;