"Date Picker Form To"
Bootstrap 3.3.0 Snippet by effa

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

Related: See More


Questions / Comments: