javascript — Datimepicker не работает при отображении на верхней стороне

Я столкнулся с проблемой, когда мой загрузчик 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>