Bootstrap datetimepicker 不工作，因为字形图标不可点击

Question

我正在使用 twitter-bootstrap 开发网页。在此页面中，我试图添加一个日期选择器，它将 select 只有一个日期。我的问题是字形图标项（在 DATE 菜单项中）不可点击。此外，当我单击文本框时，我可以看到日历，但是当我单击日期时，它不会向下折叠。这是我的代码，请帮助。谢谢

    <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>&nbsp;&nbsp;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>&nbsp;&nbsp;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>&nbsp;&nbsp;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>&nbsp;&nbsp;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>&nbsp;&nbsp;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>&nbsp;&nbsp;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>&nbsp;&nbsp;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>

此外，这是我的脚本：

 <script type="text/javascript">
$('.datepicker').datepicker({
format: 'mm/dd/yyyy'
});

    </html>

Answer 1

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

你还必须包含脚本 <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script> 并仔细检查是否应包含 js 文件。

希望对您有所帮助。

Bootstrap datetimepicker 不工作，因为字形图标不可点击

Bootstrap datetimepicker not working as the glyphicon is not clickable

twitter-bootstrap

glyphicons

bootstrap-datetimepicker