CodePen Embed - Search Bar Widget eviivo

<!-- Modifications:
* Translated into German
* After selecting the arrival and departure date, the number of nights selected is    displayed. Instead of "1 night/nights", my script displays either "1 night" or "x nights".
* After clicking in the arrival date field or after selecting a different arrival date, only a departure date can be selected that is at least one day after the arrival date.
-->

<!-- This is the sample code for a classic Search Bar widget, that will be pointing your website to the eviivo Booking Engine.  The Search Bar will need to be placed in the desired space in your website.
<!-- IMPORTANT! In order for the link to work, you need to replace the variable (https://URLLink) by the URL that matches your website implementation as detailed in the eviivo Help documentation  -->

<!-- 
Technical requirements 
* jQuery 
* jQueryUI 
* jQuery UI CSS 
-->

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js" integrity="sha256-hlKLmzaRlE8SCJC1Kw8zoUbU8BxA+8kR3gseuKfMjxA=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">

<style>
	/* Copy and insert the CSS code here below this line. The "CSS" code is visible in the middle "CSS" window --> 
	
	DATE FIELDS:  background colour for calendar headers */
	.ui-widget-header {
		background: #ffffff;
	}
</style>

<script type="text/javascript">
	// Copy and insert the JavaScript code here below this line.  The "JS" code is visible in the last "JS" window -->
</script>

<div class="ev-searchbox">

	<form id="ev-availabilitySearchResults" action="https://URLLink" method="GET" name="availabilitySearchResults">

		<div class="ev-startDate ev-options">
			<label for="startdate" class="ev-label">Ankunft</label>
			<input id="startdate" type="text" name="n" value="" class="ev-input" />
			<input id="startdate1" type="hidden" name="startdate" value="" />
		</div>

		<div class="ev-endDate ev-options">
			<label for="enddate" class="ev-label">Abreise</label> <!-- Translate -->
			<input id="enddate" type="text" name="b" value="" class="ev-input" />
			<input id="enddate1" type="hidden" name="enddate" value="" />
		</div>

		<div class="mod-options">

			<div class="ev-adults ev-options">
				<label for="adults1" class="ev-label">Erwachsene</label>
				<select name="adults1" class="ev-select">
					<option value="1">1</option>
					<option value="2" selected="selected">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
					<option value="7">7</option>
					<option value="8">8</option>
					<option value="9">9</option>
					<option value="10">10</option>
					<option value="11">11</option>
					<option value="12">12</option>
					<option value="13">13</option>
					<option value="14">14</option>
				</select>
			</div>

			<div class="ev-children ev-options">
				<label for="children1" class="ev-label">Kinder</label>
				<select name="children1" class="ev-select">
					<option selected="selected" value="0">0</option>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
					<option value="7">7</option>
					<option value="8">8</option>
					<option value="9">9</option>
					<option value="10">10</option>
					<option value="11">11</option>
					<option value="12">12</option>
					<option value="13">13</option>
					<option value="14">14</option>
				</select>
			</div>

		</div>

		<input class="ev-button" value="Verfügbarkeit prüfen" type="Submit">
	</form>
	<div class="s-ev-num-nights"></div>
</div>

/*STYLING THE SEARCH BAR */
.ev-searchbox {
	/*Search Bar font family*/
	font-family: Helvetica, Sans-Serif;
	/*Search Bar background colour*/
	background-color: #ffffff;
	/*Search Bar inner space*/
	padding: 10px;
	/*Search Bar width*/
	width: auto;
	/*Search Bar shadow, RGBa black colour colour. Opacity set to 25%*/
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
	display: inline-block;
}

/*STYLING THE FIELD HEADERS*/
.ev-searchbox .ev-label {
	display: block;
	/*Space below the field names*/
	margin: 0 0 3px 0;
	/*Font size for the field names*/
	font-size: 13px;
}

/*STYLING THE INPUT FIELDS*/
.ev-searchbox .ev-input,
.ev-searchbox .ev-select {
	/*Input fields font size*/
	font-size: 13px;
	margin: 0;
	/*Input fields inner spacing*/
	padding: 6px;
	width: 100%;
	box-sizing: border-box;
	/*Input fields border colour*/
	border: 1px solid #ededed;
	border-radius: 0px;
}

.ev-searchbox .ev-options {
	margin: 0;
	display: inline-block;
	/*Input dates field width*/
	width: 100px;
}
/*BOOKING BUTTON STYLING*/
.ev-searchbox .ev-button {
	/*Button Text colour*/
	color: #fff;
	/*Button Background colour*/
	background-color: #708090;
	/*Button inner spacing*/
	padding: 6px 12px;
	/*Button Font-size*/
	font-size: 14px;
	/*Button Font-weight (thickness) */
	font-weight: 500;
	text-align: center;
	margin: 0;
	cursor: pointer;
	border-radius: 6px;
	border: none;
	width: auto;
}
/*STYLING the Number of Nights message which appears after guests select dates*/
.ev-searchbox .s-ev-num-nights {
	/*Font size*/
	font-size: 12px;
	padding-bottom: 6px;
	/*Font colour*/
	color: #708090;
}

.ev-searchbox .ev-invalid {
	/*Styling how user errors are flagged: add red border if mandatory input fields are empty*/
	border: 1px solid rgb(255, 0, 0);
}
.mod-options {
	display: inline-block;
}

View Compiled

var $evjq = jQuery.noConflict();

$evjq(function () {
	var dateFormatUser_EU = "dd. M yy";
	var dateFormatUser_US_ex1 = "M dd yy";
	var dateFormatUser_US_ex2 = "mm-dd-yy";
	var userDateFormat = dateFormatUser_EU; // Choose option from above
	var urlQueryParameterDateFormat = "yy-mm-dd";

	$evjq.defaultsLocalization = {
		closeText: "Schließen",
		prevText: "zurück",
		nextText: "weiter",
		currentText: "Heute",
		monthNames: [
			"Januar",
			"Februar",
			"März",
			"April",
			"Mai",
			"Juni",
			"Juli",
			"August",
			"September",
			"Oktober",
			"November",
			"Dezember"
		],
		monthNamesShort: [
			"Jan",
			"Feb",
			"Mar",
			"Apr",
			"Mai",
			"Jun",
			"Jul",
			"Aug",
			"Sep",
			"Okt",
			"Nov",
			"Dez"
		],
		dayNames: [
			"Sonntag",
			"Montag",
			"Dienstag",
			"Mittwoch",
			"Donnerstag",
			"Freitag",
			"Samstag"
		],
		dayNamesShort: ["Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam"],
		dayNamesMin: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
		weekHeader: "W",
		firstDay: 1, // 1 - Monday, 0 Sunday
		isRTL: false,
		showMonthAfterYear: false,
		yearSuffix: ""
	};

	$evjq.datepicker.setDefaults($evjq.defaultsLocalization);

	$evjq("#startdate").datepicker({
		dateFormat: userDateFormat,
		onSelect: function (selectedDate) {
			var dParts = selectedDate.split("-");
			var in1Days = new Date(dParts[2] + "/" + dParts[1] + "/" + (+dParts[0] + 1));
			$evjq("#enddate").datepicker("option", "minDate", in1Days);
		},
		minDate: 0,
		altFormat: urlQueryParameterDateFormat,
		altField: "#startdate1"
	});

	$evjq("#enddate").datepicker({
		dateFormat: userDateFormat,
		onSelect: showDays,
		beforeShow: function (input, inst) {
			var start = $evjq("#startdate").datepicker("getDate");
			if (start) {
				// Setzen Sie das Mindestdatum auf einen Tag nach dem Anreisedatum
				var minDate = new Date(
					start.getFullYear(),
					start.getMonth(),
					start.getDate() + 1
				);
				$evjq("#enddate").datepicker("option", "minDate", minDate);
			}
		},
		altFormat: urlQueryParameterDateFormat,
		altField: "#enddate1"
	});

	function showDays() {
		var start = $evjq("#startdate").datepicker("getDate");
		var end = $evjq("#enddate").datepicker("getDate");
		if (!start || !end) return;
		var days = (end - start) / 1000 / 60 / 60 / 24;

		$evjq(".s-ev-num-nights")
			.text(days + (days === 1 ? " Nacht" : " Nächte"))
			.show();
	}

	var date = new Date(),
		dateString =
			date.getMonth() +
			1 +
			"/" +
			date.getDate() +
			"/" +
			date.getFullYear().toString().substr(2, 2);
	$evjq("#startdate").datepicker("setDate", date);
	$evjq("#startdate,#enddate").blur(function () {
		$evjq("#startdate,#enddate").removeClass("ev-invalid");
	});

	$evjq("#availabilitySearchResults").submit(function () {
		if ($evjq.trim($evjq("#startdate").val()) === "") {
			$evjq("#startdate").addClass("ev-invalid");
			return false;
		}
		if ($evjq.trim($evjq("#enddate").val()) === "") {
			$evjq("#enddate").addClass("ev-invalid");
			return false;
		} else {
			$evjq("#startdate,#enddate").removeClass("ev-invalid");
			$evjq("#startdate,#enddate", this).attr("name", "");
			$evjq("#startdate,#enddate", this).attr("value", "");
			return true;
		}
	});
});

View Compiled

Run Pen

This Pen is owned by Marc on CodePen. It is a fork of this Pen.

See more by @zan_tafio on CodePen

External CSS

https://code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css

External CSS

External JavaScript