Bootstrap 3 Responsive Menu - YAMM - Mega Menu Datepicker

Jquery datepicker in both the nav and body of Bootstrap 3

by bizamajig

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//geedmo.github.io/yamm/assets/css/yamm.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<!-- ///////// START NAVABAR /////////// -->
<div class="navbar navbar-fixed-top navbar-inverse yamm">
    <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

        </button>	<a href="/default.aspx" class="navbar-brand" style="color:white"><h3 style="color:white;padding:0;margin:0">Fiddle</h3></a>

    </div>
    <div class="collapse navbar-collapse navbar-responsive-collapse">
        <ul class="nav navbar-nav" style="float:none;margin-left:auto;margin-right:auto;width:350px">
            <li class="dropdown" id="search_parent">	<a class="dropdown-toggle" href="/" data-toggle="dropdown">
                	<span class="glyphicon glyphicon-search"></span><b class="caret"></b></a>

                <!-- Start Search Form -->
                <div class="dropdown-menu col-sm-4 col-md-4 col-lg-4" id="search-form-menu">
                    <div class="row yamm-content">
                       <form>
                        <div class="col-sm-12 col-md-12 col-lg-12">
                            <fieldset>
                                <legend>Date Input:</legend>
                                <div class="input-group" style="margin-bottom:14px">
                                    <input type="text" ID="datepicker-nav" class="form-control date-picker date-picker-nav" placeholder="Arrival Date" />
                                    <label for="datepicker-nav" class="input-group-addon btn"><span class="glyphicon glyphicon-calendar"></span>
 ...

CSS

.navbar-brand {
    padding-left:20px
}
.navbar-tagline {
    float:right
}
.navbar .glyphicon {
    vertical-align:middle
}
.navbar-inverse {
    background-color: #69F;
    border:0
}
.navbar-inverse .navbar-nav > li > a {
    color: #fff !important;
    font-size:24px
}
.navbar-inverse .nav li.dropdown.open>.dropdown-toggle, .navbar-inverse .nav li.dropdown.active> .dropdown-toggle, .navbar-inverse .nav li.dropdown.open.active>.dropdown-toggle {
    color: #fff;
    background-color: #183a6c;
}
.date-picker-nav {
    position:relative;
    z-index:9001
}

JavaScript

$(function () {
    $(".date-picker").datepicker();

    $(".date-picker").on("change", function () {
        var id = $(this).attr("id");
        var val = $("label[for='" + id + "']").text();
        $("#msg").text(val + " changed");
    });
});


$(document).on('click', '.yamm .dropdown-menu', function (e) {

    e.stopPropagation()

})
$(document).on('click', '.ui-datepicker-prev', function (e) {

    e.stopPropagation()

})
$(document).on('click', '.ui-datepicker-next', function (e) {

    e.stopPropagation()

})

$("#cal").click(function (event) {
    event.preventDefault();
});