0
I would like to know how to make the search engine appear the place with to make a Seat Filter and on the side had check in, check out.. exactly like Airbnb, I tried this way but it didn’t work:
JS:
$(window).ready(function(){
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin = $('#checkin').datepicker({
onRender: function(date) {
return date.valueOf() < now.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function(ev) {
if (ev.date.valueOf() > checkout.date.valueOf()) {
var newDate = new Date(ev.date)
newDate.setDate(newDate.getDate() + 1);
checkout.setValue(newDate);
}
checkin.hide();
$('#checkout')[0].focus();
}).data('datepicker');
var checkout = $('#checkout').datepicker({
onRender: function(date) {
return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function(ev) {
checkout.hide();
}).data('datepicker');
});
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #e3e3e3;
}
.carousel {
height: 500px;
margin-bottom: 60px;
}
.carousel .item {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
.search {
margin-top: -25%;
}
.search .form-section{
background:rgba(0,0,0,0.6);
border: 2px solid #414141;
border-radius: 5px;
padding: 10px;
}<!DOCTYPE html>
<html>
<body>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1">
<title>Real Estate </title>
<link rel="stylesheet" href="style.css">
<!--[if lt IE 9]>
<script src="js/ie-support/html5.js"></script>
<script src="js/ie-support/respond.js"></script>
<![endif]-->
</head>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="img/sample1.jpg" alt="First slide">
</div>
<div class="item">
<img src="img/sample2.jpg" alt="Second slide">
</div>
<div class="item">
<img src="img/sample3.jpg" alt="Third slide">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<div class="search">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="form-section">
<div class="row">
<form role="form">
<div class="col-md-4">
<div class="form-group">
<label class="sr-only" for="location">Location</label>
<input type="email" class="form-control" id="location" placeholder="Where ?">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="sr-only" for="checkin">Check in</label>
<div class="input-group">
<input type="text" class="form-control" id="checkin" placeholder="Check in">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="sr-only" for="checkout">Check out</label>
<div class="input-group">
<input type="text" class="form-control" id="checkout" placeholder="Check out">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="sr-only" for="guest">Guest</label>
<select id="guest" name="guest" class="form-control">
<option value="1">1 Guest</option>
<option value="2">2 Guests</option>
<option value="3">3 Guests</option>
<option value="4">4 Guests</option>
<option value="5">5 Guests</option>
<option value="6">6 Guests</option>
<option value="7">7 Guests</option>
<option value="8">8 Guests</option>
<option value="9">9 Guests</option>
<option value="10">10 Guests</option>
<option value="11">11 Guests</option>
<option value="12">12 Guests</option>
<option value="13">13 Guests</option>
<option value="14">14 Guests</option>
<option value="15">15 Guests</option>
<option value="16">16+ Guests</option>
</select>
</div>
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-default btn-primary">Search</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
</body>
</html>
Krosie, as for the seating filter, you can save everyone within a database and use an autocomplete plugin (or create), for example http://www.runningcoder.org/jquerytypeahead/demo/. As for checkin and checkout, goes the same way, only the difference is that you have to use a Date Picker.
– Lucas Henrique
Thank you, I’ll test that!
– Krosie