Booking Bar Ihotelier

book

by Emmanuel Garcia

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css">
<div class="booking"> <section> 
<form class="booking" action="https://bookings.ihotelier.com/bookings.jsp" method="GET" target="_blank" onsubmit="return validateBooking();">

<input id="dp1" type="text" class="clickabled input-mds" id="DtChkIn" placeholder="&#xf133;  Arrival Date">
<input id="dp2" type="text" class="clickables input-mds" id="DtChkOut" placeholder="&#xf133;  Departure Date">

<span class="lbForm">Rooms</span> <select name="rooms" id="rooms"> <option value="1" selected="">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select>

<span id="spAdult" class="lbForm">Adults (+12)</span> <select name="adults" class="" id="select-adults"> <option value="0">0</option> <option value="1">1</option> <option value="2" selected="">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select>

<span id="spTeen" class="lbForm">Kids (-12)</span> <select name="children" class="" id="select-teens"> <option value="0" selected="">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> </select>

<button type="submit" class="" id="btn-booking">Book Now</button>


</form></section> </div>

CSS

input {
  padding:10px;
	font-family: FontAwesome, "Open Sans", Verdana, sans-serif;
  text-decoration: inherit;
  border-radius: 0 !important;
  z-index:20000;
}

.form-control {
  border-radius: 0 !important;
  font-size: 12x;
}

.clickable { cursor: pointer; }


.booking {background-color: #d5d5d5;color: #000;padding-bottom: 15px;padding-top: 10px;}






ul.social-media li {
  list-style: none;
  display: inline-block;
  padding:5px;
}


.social-media {
  z-index:1;
}

JavaScript

var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);

var checkin = $('#dp1').datepicker({

  beforeShowDay: function(date) {
    return date.valueOf() >= now.valueOf();
  },
  autoclose: true

}).on('changeDate', function(ev) {
  if (ev.date.valueOf() > checkout.datepicker("getDate").valueOf() || !checkout.datepicker("getDate").valueOf()) {

    var newDate = new Date(ev.date);
    newDate.setDate(newDate.getDate() + 1);
    checkout.datepicker("update", newDate);

  }
  $('#dp2')[0].focus();
});


var checkout = $('#dp2').datepicker({
  beforeShowDay: function(date) {
    if (!checkin.datepicker("getDate").valueOf()) {
      return date.valueOf() >= new Date().valueOf();
    } else {
      return date.valueOf() > checkin.datepicker("getDate").valueOf();
    }
  },
  autoclose: true

}).on('changeDate', function(ev) {});