Bootstrap Snippet Nav Bar Search Widget using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
        $( 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);
                                    
                            },
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Nav Bar Search Widget"
Bootstrap 3.0.0 Snippet by sachin6185

Related: See More

Questions / Comments:

"Nav Bar Search Widget" Bootstrap 3.0.0 Snippet by sachin6185

Related: See More

Questions / Comments:

"Nav Bar Search Widget"
Bootstrap 3.0.0 Snippet by sachin6185