Datetimepicker 在上侧显示时不起作用

Question

我遇到一个问题，当日期时间选择器显示在上侧时，我的 bootstrap 日期时间选择器 无法正常工作 .

这是截图：

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

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

当日期时间选择器显示在下方时，我可以单击并select日期时间选择器，它会起作用适当地。

这是我的代码：

<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>

Answer 1

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

查看摘要

$(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>

Datetimepicker 在上侧显示时不起作用

Datimepicker Not working when displayed on upper side

javascript

php

jquery

datetimepicker

twitter-bootstrap