<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<header class="header">
<div class="container-fluid">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<a class="logo" href="#"><img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="main-logo" />
</a>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
<div class="menu-link mobile">
<ul>
<li class="active"><a href="#"><i class="fa fa-plane" aria-hidden="true"></i> Flight</a>
</li>
<li><a href="#"><i class="fa fa-car" aria-hidden="true"></i> Car rentel</a>
</li>
<li><a href="#"><i class="fa fa-bed" aria-hidden="true"></i> Hotels</a>
</li>
<li><a href="#"><i class="fa fa-lightbulb-o" aria-hidden="true"></i> Insparation</a>
</li>
<li><a href="#"><i class="fa fa-user" aria-hidden="true"></i> Login</a>
</li>
</ul>
</div>
</div>
</div>
</header><br/><br/><br/><br/><br/>
<main class="main-bg">
<div class="container">
<div class="col-lg-5 col-md-5 col-sm-6 col-xs-12">
<div class="flight-widget">
<ul>
<li class="flight-align active"><a href="#"><i class="fa fa-plane" aria-hidden="true"></i> Flight</a></li>
<li><a href="#"><i class="fa fa-bed" aria-hidden="true"></i> Hotel</a></li>
<li class="car-align"><a href="#"><i class="fa fa-car" aria-hidden="true"></i> Cars</a></li>
</ul>
<div class="tab-content">
<div class="hotel-con">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-plane" aria-hidden="true"></i></div>
<input type="text" class="form-control" id="fromfly" placeholder="Departing City or Airport Name">
</div>
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-plane fa-flip-horizontal" aria-hidden="true"></i></div>
<input type="text" class="form-control" id="fromto" placeholder="Returning City or Airport Name">
</div>
<div class="input-group half">
<div class="input-group-addon"><i class="fa fa-calendar" aria-hidden="true"></i></div>
<input type="text" class="form-control pickup-date" name="daterange" data-provide="datepicker" id="origin" placeholder="Pick a Date">
<input type="hidden" id="Odate" name="date" value="month" class="big-box">
<input type="hidden" id="Omonth" name="date" value="date" class="big-box">
<input type="hidden" id="Oyear" name="year" value="year" class="big-box">
</div>
<div class="input-group half pull-right">
<div class="input-group-addon"><i class="fa fa-calendar" aria-hidden="true"></i></div>
<input type="text" class="form-control pickup-date" name="daterange" data-provide="datepicker" id="destination" placeholder="Pick a Date">
<span id="Dmonth"></span>
<span id="Ddate"></span>
<span id="Dyear"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<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>
<script src="https://momentjs.com/downloads/moment.min.js"></script>
.header {
width: 100%;
float: left;
background: #050606;
position: fixed;
left: 0px;
right: 0px;
top: 0px;
z-index: 9999;
box-shadow: 0 0 5px #888;
}
.menu-link {
width: 100%;
float: left;
}
.menu-link ul {
margin: 0px;
padding: 0px;
list-style: none;
float: right
}
.menu-link ul li {
display: inline-block
}
.menu-link ul li a {
display: block;
margin: 0 10px;
padding: 27px 15px;
color: #999;
text-decoration: none;
border-bottom: 3px solid #ba0400;
font-size: 14px;
text-align: left;
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
}
.menu-link ul li a:hover {
color: #fff;
border-bottom: 3px solid #fff;
}
.main-bg{ background: url(../images/z1YRs7.jpg) no-repeat left center;
width: 100%;
float: left;
height: 100%;
background-size: cover;}
.flight-widget{ width: 100%;
float: left;
background: rgba(0 ,0,0, .5);
padding: 0;
margin-top: 50px;
border: 5px solid #5774da;
box-shadow: 2px 4px 8px #060606;}
.flight-widget ul{ margin: 0;
padding: 0;
list-style: none;text-align:center;}
.flight-widget ul li{ display: inline-block;}
.flight-widget ul li.flight-align{float:left;}
.flight-widget ul li.active{background:#3c3b6e;}
.flight-widget ul li.car-align{float:right;}
.flight-widget ul li a{display: block;
margin: 10px 15px;
color: #fff;
font-size: 19px;
}
.tab-content{width:100%;float:left;padding:5px;background:#3c3b6e;}
.tab-content .input-group-addon {
background-color: #b22234;
border:none;
color: #fff;
}
.hotel-con .input-group{margin:5px 0;float:left;width:100%;}
.input-group.half{width:48%}
/*Csutom css of calnder*/
#ui-datepicker-div{z-index:99!important;}
$( document ).ready(function() {
console.log('Hi sachin, every thisng is right till Now')
$( function() {
$( "#origin" ).datepicker({
numberOfMonths: 2,
showButtonPanel: false,
minDate: 0,
maxDate: "+4M",
dateFormat: 'dd/mm/yy',/*'dd/mm/yy'*/
onSelect: function (selectedDate) {
var date3 = $("#origin").val() == "" ? new Date() : moment($("#origin").val(), "DD/MM/YYYY").toDate();
date3.setDate(date3.getDate() + 1);
$("#destination").datepicker("option", "minDate", date3);
setTimeout(function(){ $("#destination").focus() }, 100);
}
});
});
$( function() {
$( "#destination" ).datepicker({
numberOfMonths: 2,
showButtonPanel: false,
minDate: 0,
maxDate: "+4M",
dateFormat: 'dd/mm/yy',/*'dd/mm/yy'*/
onSelect: function compare() {
date1 = $('#origin').val();
date2 = $('#destination').val();
console.log('First Date: '+date1 +' || Second Date: '+ date2);
},
beforeShowDay: function (date) {
var date1 = $("#origin").val() == "" ? new Date() : moment($("#origin").val(), "DD/MM/YYYY").toDate();
var date2 = $("#destination").val() == "" ? new Date() : moment($("#destination").val(), "DD/MM/YYYY").toDate();
return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""];
},
});
});
});
$( function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#fromfly" ).autocomplete({
source: availableTags
});
} );
$( function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#fromto" ).autocomplete({
source: availableTags
});
} );
