Datetimepicker 在上侧显示时不起作用答案

【问题标题】：Datimepicker Not working when displayed on upper sideDatetimepicker 在上侧显示时不起作用
【发布时间】：2015-09-23 02:01:28
【问题描述】：

当日期时间选择器显示在上侧时，我的引导程序日期时间选择器无法正常工作。

这是截图：

当日期时间选择器显示在上方

时，我无法点击日期时间选择器上的任何内容

当日期时间选择器显示在下方时，我可以单击并选择日期时间选择器，它会正常工作。

这是我的代码：

<script type="text/javascript">

$(function() {
$('#select_year').datepicker({
 format: "yyyy", // Notice the Extra space at the beginning
viewMode: "years", 
minViewMode: "years",
 autoclose: true
});
});
</script>

这就是我显示行的方式：

        <form action="set_holidays.php" method="post" >
    <div class="col-sm-3">
        <label for="field-1"  class="control-label pull-left holiday-vertical"><h4 style='padding-left:10px;'><b>Year</b></h4></label>  
        <div class="col-sm-8"> 
            <div class="input-group date">           
            <input type="text" id="select_year" name="year" class="form-control years" value="$this->year">
              <span class="input-group-btn">
                        <button class="btn btn-default" type="submit">Go</button>
                        <input type='hidden' value='refresh' name='action'>
                    </span>
            </div>
        </div>                        
             </div>                                    
    </form>

这就是我包含js和css的方式

<link type="text/css" href="mypath/bootstrap.min.css" rel="stylesheet"/>
<link type="text/css" href="mypath/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<link type="text/css" href="mypath/datepicker.css" rel="stylesheet"/>

<script type="text/javascript" src="mypath/jquery.min.js"></script>
<script type="text/javascript" src="mypath/bootstrap.min.js"></script>
<script type="text/javascript" src="mypath/bootstrap-datepicker.js"></script>

【问题讨论】：

有不止一个用于 jQuery/Twitter-bootstrap 的日期选择器，您可能希望参考您正在使用的日期选择器，以便其他人可以更好地评估您的问题。
尝试将日期选择器容器的“z-index”样式设置为“16777271”，看看它是否适合您。
@choz 只是好奇，你怎么知道还有一个带有 z-index-16777270 的对象？
@CrandellWS 嗨，我更新了我的问题
@choz 我明白了。谢谢分享。 :)

标签： javascript php jquery twitter-bootstrap datetimepicker

【解决方案1】：

假设您正在使用来自http://eternicode.github.io/bootstrap-datepicker 的日期选择器，它有一个可以设置为orientation: "top auto" 的方向选项，这将使日历的顶部与输入框保持一致。

请看sinppet

$(function() {
  $('#select_year').datepicker({
    format: "yyyy", // Notice the Extra space at the beginning
    viewMode: "years",
    minViewMode: "years",
    autoclose: true,
    orientation: "top auto"
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker3.css" rel="stylesheet" />

<form action="set_holidays.php" method="post">
  <div class="col-sm-3">
    <label for="field-1" class="control-label pull-left holiday-vertical">
      <h4 style='padding-left:10px;'><b>Year</b></h4>
    </label>
    <div class="col-sm-8">
      <div class="input-group date">
        <input type="text" id="select_year" name="year" class="form-control years" value="$this->year">
        <span class="input-group-btn">
          <button class="btn btn-default" type="submit">Go</button>
          <input type='hidden' value='refresh' name='action'>
        </span>
      </div>
    </div>
  </div>
</form>

【讨论】：