Here is the detailed markup for the datepicker component:
<div class="form-group row">
<div class="col-xs-3 col-md-offset-9">
<label class="control-label">Pick Date</label>
<div class="input-group date" id="dp3" data-date="12-02-2012" data-date-format="mm-dd-yyyy">
<input class="form-control" type="text" readonly="" value="12-02-2012">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</div>
This is how it currently appears:
Despite including the necessary CSS and JS files, clicking on the calendar icon does not display the expected table-like date picker. Here are the file references:
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/datepicker.css" rel="stylesheet">
<script type="text/javascript"src="js/jquery-2.0.3.js"></script>
<script type="text/javascript"src="js/bootstrap.js"></script>
<script type="text/javascript"src="js/bootstrap-datepicker.js"></script>
I have attempted to initialize the datepicker function both in the <head></head> section and at the end of the <body></body>, but there is still no response upon clicking the button.
<script type="text/javascript">
$(document).ready(function() {
$("#dp3").datepicker({ autoclose: true, todayHighlight: true });
});
$(window).on('load',function(){
$("#dp3").datepicker({ autoclose: true, todayHighlight: true });
});
</script>
There were some modifications made to the CSS and JS code due to the updated Bootstrap 3 framework. Source:
If anyone has a solution to ensure that a table-like datepicker displays upon clicking the calendar button, your assistance would be greatly appreciated. Thank you.