I am using twitter-bootstrap to develop a web page. In this page I am trying to add a datepicker which will select only one date. My problem is that the glyphicon item (in the DATE menu item) is not clickable. Also when I click on the text box, i can see the calendar but when I click on a date, it doesn't collapse down. Here is my code, please help. Thank you
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<!-- Include Twitter Bootstrap and jQuery: -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/moment.min.js"></script>
<script type="text/javascript"src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<body>
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-3">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-option-vertical"></span> Model Type</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<table class="table">
<tr>
<td>
<div class="checkbox"><label><input type="checkbox" value="WRF">WRF</label>
</div> <div class="checkbox"><label><input type="checkbox" value="SAM">SAM</label></div>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-option-vertical">
</span> Large Scale Forcing</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr>
<td>
<div class="checkbox"><label><input type="checkbox" value="VARANAL1">VARANAL</label></div>
<div class="checkbox"><label><input type="checkbox" value="ECMWF1">ECMWF</label></div>
<div class="checkbox"><label><input type="checkbox" value="MSDA1">MSDA</label></div>
<div class="checkbox"><label><input type="checkbox" value="ECMWFOMEGA">ECMWF DDH D20 (RESIDUAL USING OMEGA)</label></div>
<div class="checkbox"><label><input type="checkbox" value="ECMWFSCM">ECMWF SCM</label></div>
<div class="checkbox"><label><input type="checkbox" value="MSDA150">MSDA FNL 150KM VER.20160310</label></div>
<div class="checkbox"><label><input type="checkbox" value="MSDA300">MSDA FNL 300KM VER.20160310</label></div>
<div class="checkbox"><label><input type="checkbox" value="MSDA75">MSDA FNL 75KM VER.20160310</label></div>
<div class="checkbox"><label><input type="checkbox" value="selectAll1">Select All</label></div>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-option-vertical">
</span> Initial Conditions</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr>
<td>
<div class="checkbox"><label><input type="checkbox" value="ECMWF">ECMWF</label></div>
<div class="checkbox"><label><input type="checkbox" value="SONDE">SONDE</label></div>
<div class="checkbox"><label><input type="checkbox" value="VARANAL">VARANAL</label></div>
<div class="checkbox"><label><input type="checkbox" value="MSDA">MSDA</label></div>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-option-vertical">
</span> Surface Treatment</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr>
<td>
<div class="checkbox"><label><input type="checkbox" value="VARMWF">VARANARAPSIMPLE PRESCRIBEDECMWF</label></div>
<div class="checkbox"><label><input type="checkbox" value="VARVARANAL">VARANARAPSIMPLE PRESCRIBEDVARANAL</label></div>
<div class="checkbox"><label><input type="checkbox" value="VARMSDA">VARANARAPSIMPLE PRESCRIBEDMSDA</label></div>
<div class="checkbox"><label><input type="checkbox" value="VARPRES">VARANARAPSIMPLE PRESCRIBED</label></div>
<div class="checkbox"><label><input type="checkbox" value="VARPLAND">VARANARAPSIMPLE PRESCRIBEDVARANAPLAND</label></div>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFive"><span class="glyphicon glyphicon-option-vertical">
</span> Plot Type</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr>
<td>
<div class="checkbox"><label><input type="checkbox" value="timeseries">Time-series</label></div>
<div class="checkbox"><label><input type="checkbox" value="scatterplot">Scatterplot</label></div>
<div class="checkbox"><label><input type="checkbox" value="heatmap">Heatmap</label></div>
<div class="checkbox"><label><input type="checkbox" value="Taydiam">Taylor Diagram</label></div>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseSix"><span class="glyphicon glyphicon-option-vertical">
</span> Measurements</a>
</h4>
</div>
<div id="collapseSix" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr>
<td>
<div class="checkbox"><label><input type="checkbox" value="humidity">Relative Humidity</label></div>
<div class="checkbox"><label><input type="checkbox" value="temperature">Temperature</label></div>
<div class="checkbox"><label><input type="checkbox" value="LCL">LCL</label></div>
<div class="checkbox"><label><input type="checkbox" value="LWP">LWP</label></div>
<div class="checkbox"><label><input type="checkbox" value="CF">Cloud fraction ???</label></div>
<div class="checkbox"><label><input type="checkbox" value="CFARSCL">Cloud fraction ARSCL</label></div>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseSeven"><span class="glyphicon glyphicon-option-vertical">
</span> Date</a>
</h4>
</div>
<div id="collapseSeven" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr>
<td>
<div class="form-group">
<div class='input-group date' >
<input type="text" class="form-control">
<span class="input-group-addon ">
<span class="glyphicon glyphicon-calendar datepicker "></span>
</span>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
</div >
<div >
<div class="col-md-6 col-md-6">
<button type="button" class="btn btn-lg btn-success">PLOT DATA</button>
</div>
</div>
</div>
</div>
<div class="col-sm-9 col-md-9">
<div class="well">
<h1>The Plot will go here</h1>
THE PLOT WILL BE DISPLAYED HERE
</div>
</div>
</body>
Also, here is my script:
<script type="text/javascript">
$('.datepicker').datepicker({
format: 'mm/dd/yyyy'
});
</html>
HTML
<div class='input-group date datepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
SCRIPT
$('.datepicker').datepicker({
format: 'mm/dd/yyyy',
});
Also you must have to include the script
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script> And double check that js file should be included.
Hope this will help you.