Question

我遇到的问题是，当上方上显示datetimepicker时，我的bootstrap datetimepicker 无法正常工作。

以下是截图：

当上方

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

当datetimepicker 显示在下方时，我可以点击并选择 datetimepicker，它将正常工作。

这是我的代码：

<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"的方向选项，这将使日历的顶部与输入框保持一致。

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

Datimepicker在上方显示时不工作

1 个答案: