Código:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Booking Form Omnibees</title>
<!--Load external library in Jquery-->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
#comp-k8pyw0su {
position: relative;
margin: 0!important;
left: 0!important;
grid-area: 2 / 1 / 3 / 2;
justify-self: start;
align-self: start;
width: 100%!important;
}
html, body{
margin: 0;
padding: 0;
}
#be {
background: #ededed;
padding: 5px 0;
border-radius: ;
width: 100%;
margin: 0;
font-family: "Fira Sans Light";
}
#be .row {
width: 100%;
margin: 5px auto;
text-align: center;
display: flex;
align-items: flex-end;
justify-content: center;
vertical-align: bottom;
}
#be label {
font-size: 15px;
color: #004070;
display: block;
margin-bottom: 5px;
}
#be .columns {
display: inline-block;
text-align: center;
align-content: center;
margin: 0 5px;
}
#be input,
#be select,
#be button {
width: 150px;
font-size: 11px;
padding: 10px 10px;
border: 0px;
border-radius: 10px;
background: #fff;
color: #004070;
max-height: 58px;
outline:none;
align-content: center;
font-family: 'Fira Sans';
}
#be .button {
color: #ededed;
text-transform: ;
font-size: 15px;
border: none;
padding: 10px 0;
transition: all ease-in-out .2s;
cursor: pointer;
background: #004070;
font-family: 'Fira Sans';
}
#be .button:hover {
background: #bce4fa;
}
@media only screen and (max-width: 500px) {
#be {
border-radius: 3px;
}
#be .row {
width: 100%;
margin: 10px auto;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
vertical-align: bottom;
flex-direction: column;
}
#be .columns {
text-align: center;
}
#be .btn {
margin-top:10px;
}
}
</style>
</head>
<body>
<div id="be">
<form method="GET" id="datepickerform" onsubmit="submitform()" target="_blank" action="https://reservations.omnibees.com/default.aspx">
<input type="hidden" id="q" name="q" value="6111">
<input type="hidden" id="lang" name="lang" value="pt-br">
<!--Language-->
<div class="row">
<div class="columns">
</div>
</style>
<!--Check In-->
<div class="columns">
<!-- <input type="text" id="dpd1" name="CheckIn" class="date-selector" />-->
<input type="text" id="dpd1-consola" placeholder="checkin"/>
<input type="text" id="checkincerto" autocomplete="off" hidden name="CheckIn"/>
</div>
<!--Check Out-->
<div class="columns">
<!-- <input type="text" id="dpd2" name="CheckOut" class="date-selector"/>-->
<input type="text" id="dpd2-consola" placeholder="checkout"/>
<input type="text" id="checkoutcerto" autocomplete="off" hidden name="CheckOut"/>
</div>
<div class="columns">
<select name="ad" id="ad">
<option value="0" selected> Adultos</option>
<option value="1">1 Adulto</option>
<option value="2">2 Adultos</option>
<option value="3">3 Adultos</option>
<option value="4">4 Adultos</option>
<option value="5">5 Adultos</option>
<option value="6">6 Adultos</option>
<option value="7">7 Adultos</option>
<option value="8">8 Adultos</option>
<option value="9">9 Adultos</option>
<option value="10">10 Adultos</option>
</select>
</div>
<div class="columns crianca">
<select name="Ch" id="Ch">
<option value="" selected> Crianças</option>
<option value="0">0 Criança</option>
<option value="1">1 Criança</option>
<option value="2">2 Crianças</option>
<option value="3">3 Crianças</option>
<option value="4">4 Crianças</option>
<option value="5">5 Crianças</option>
<option value="6">6 Crianças</option>
<option value="7">7 Crianças</option>
<option value="8">8 Crianças</option>
<option value="9">9 Crianças</option>
<option value="10">10 Crianças</option>
</select>
</div>
<!--Submit Button-->
<div class="columns btn">
<input type="submit" value="RESERVAR" name="submit" class="button" id="submit" />
</div>
</div>
<span style="display:none;" id="qorc"></span>
</form>
</div>
<script>
$(document).ready(function() {
$.datepicker.setDefaults({
showOn: "focus",
dateFormat: "dd/mm/yy",
dayNames: ["Domingo", "Segunda", "Terça", "Quarte", "Quinta", "Sexta", "Sábado"],
dayNamesMin: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sab"],
monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
prevText: "Anterior",
nextText: "Próximo",
});
// First datepicker properties
$("#dpd1-consola").datepicker().attr('readonly', 'readonly').datepicker();
// Second datepicker properties
$('#dpd2-consola').datepicker({
dateFormat: "dd/mm/yy",
onClose: function () {
var dt1 = $('#dpd1-consola').datepicker('getDate');
console.log(dt1);
var dt2 = $('#dpd2-consola').datepicker('getDate');
if (dt2 <= dt1) {
var minDate = $('#dpd2-consola').datepicker('option', 'minDate');
$('#dpd2-consola').datepicker('setDate', minDate);
}
}
}).attr('readonly', 'readonly').datepicker();
$('#datepickerform').submit(function() {
$('#checkincerto').val($('#dpd1-consola').val().replace(/\//g, ''));
$('#checkoutcerto').val($('#dpd2-consola').val().replace(/\//g, ''));
});
});
function submitform() {
var property = $('.property').val();
var sel = document.getElementById('selecthotelrede');
var f = document.getElementById('qorc');
sel.onchange = function() {
var selected = sel.options[sel.selectedIndex];
f.innerHTML = selected.getAttribute('data-qorc');
var searchParameters = "?q=" + property;
var searchParameters2 = "?c=" + property;
if (f.innerHTML == "q") {
var b = document.getElementById("selecthotelrede");
b.setAttribute("name", "q");
document.getElementById('datepickerform').action; //Will retrieve it
document.getElementById('datepickerform').action = "https://myreservations.omnibees.com/default.aspx" + searchParameters;
} else {
var b = document.getElementById("selecthotelrede");
b.setAttribute("name", "c");
document.getElementById('datepickerform').action; //Will retrieve it
document.getElementById('datepickerform').action = "https://myreservations.omnibees.com/chain.aspx" + searchParameters2;
}
};
sel.onchange();
}
</script>
</body></html>
<style>
#comp-k8pyw0su{
position: relative;
margin: 0px 0px 0px 0;
left: 0;
grid-area: 2 / 1 / 3 / 2;
justify-self: start;
align-self: start;
width: 100%!important;
}
</style>
