"Nav Bar Search Widget"
Bootstrap 3.0.0 Snippet by sachin6185

<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 }); } );

Related: See More


Questions / Comments: