<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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=" https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<div class="container">
<div class="row">
<h2>Date Picker Form To</h2>
<div class="form-group">
<label class="control-label" for="date">Form</label>
<div class="input-group date" id="dp3" data-date="12-02-2017" data-date-format="mm-dd-yyyy">
<input name="date" class="form-control" type="text" value="12-02-2017">
<span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar" id="butt"></i></span>
</div>
</div>
<div class="form-group"> <!-- Date input -->
<label class="control-label" for="date">To</label>
<div class="input-group date" id="dp3" data-date="12-02-2017" data-date-format="mm-dd-yyyy">
<input name="date" class="form-control" type="text" value="12-02-2017">
<span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar" id="butt"></i></span>
</div>
</div>
<div class="mrg10">
<a href="#" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect addtoca">Go</a>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
.mdl-button--raised {
background: rgba(159, 159, 159, 0.9) none repeat scroll 0 0;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
color: #fff;
}
.mdl-button {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
border-radius: 2px;
color: #000;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: 500;
height: 36px;
letter-spacing: 0;
line-height: 36px;
min-width: 64px;
outline: 0 none;
overflow: hidden;
padding: 0 8px;
position: relative;
text-align: center;
transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1) 0s, background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s;
will-change: box-shadow, transform;
}
.mdl-button--raised.addtoca {background: rgb(9, 133, 216);border-radius: 2px;box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);color: #fff;font-size: 13px;height: 38px; line-height: 38px;width: 100%;}
$(document).ready(function(){
var date_input=$('.date'); //our date input has the name "date"
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
date_input.datepicker({
format: 'mm/dd/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
});
});
