0
Ich benutze twitter-bootstrap, um eine Webseite zu entwickeln. Auf dieser Seite versuche ich einen Datepicker hinzuzufügen, der nur ein Datum auswählt. Mein Problem ist, dass das Element glyphicon (im Menüpunkt DATE) nicht anklickbar ist. Wenn ich auf das Textfeld klicke, kann ich zwar den Kalender sehen, aber wenn ich auf ein Datum klicke, wird es nicht minimiert. Hier ist mein Code, bitte helfen. Danke Bootstrap datetimepicker funktioniert nicht, da das Glyphicon nicht anklickbar ist
<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>
Auch hier ist mein Skript:
<script type="text/javascript">
$('.datepicker').datepicker({
format: 'mm/dd/yyyy'
});
</html>
Noman, Danke. Ich habe den Code aktualisiert, Mein Problem ist, dass wenn ich auf den Kalender klicke, es erscheint, aber es nicht klickbar ist, irgendein Datum zu wählen. – Alka
Ich aktualisierte die Antwort versuchen Sie den HTML-Code wie folgt. Hoffe das wird dir helfen. Es funktioniert auf meiner Seite. – NomanJaved
Es funktioniert, danke :) – Alka