CSS Bootstrap Glyphicon-Calendar不显示日历

问题描述

i need to create datetimepicker using bootstrap in my PHP code i write


<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
 
    </div>
</div>

在脚本部分中，我写了以下内容

<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
 <script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>

datetimepicker正常显示，但是当我单击它时，日历无法打开

解决方法

包装

<span class="glyphicon glyphicon-calendar"></span>

内部标签标记：

 <label class="input-group-addon" for="dateField">
    <span class="glyphicon glyphicon-calendar"></span>
  </label>

更正如下：

<div class="container">
   <div class="row">
       <div class='col-sm-6'>
           <div class="form-group">
               <div class='input-group date' id='datetimepicker1'>
                    <input id="dateField" type='text' class="form-control" />
                    <label class="input-group-addon" for="dateField">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </label>
               </div>
           </div>
       </div>
    </div>
</div>