Datetimepicker在上方显示时不起作用

Question

I am facing a problem where my bootstrap datetimepicker cannot work properly when the datetimepicker is shown on the upper side.

Here is a screenshot:

I cannot click anything on the datetimepicker when the datetimepicker shown on the upper side

When the datetimepicker is shown on the lowers side, I can click and select the datetimepicker and it will work properly.

This is my code:

<script type="text/javascript">

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

This is how I display the row:

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

This is how i included js and 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

It is an assumption that you are using the datepicker from http://eternicode.github.io/bootstrap-datepicker which has an option for orientation that could be set as orientation: "top auto" which would keep the calendar's top against the input box.

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

</div>