Ошибка при использовании bootstrap datetimepicker

Я пытаюсь использовать bootstrap-datetimepicker из datetimepicker, но когда отображается средство выбора даты, это покрывает ввод.

введите здесь описание изображения

введите здесь описание изображения

Код, который я использую, выглядит примерно так:

       <div class="col-md-6" >
            @Html.LabelFor(model => model.BeginDate)
            <div class="form-group" id="">
                @Html.TextBoxFor(model => model.BeginDate,  new { @class = "form-control" , @id="datetimepicker"} )                        
            </div>
            @Html.ValidationMessageFor(model => model.BeginDate)
        </div>

Я инициализирую Datetimepicker следующим образом:

$(document).ready(function ()
    {
        $("#datetimepicker").datetimepicker({
            defaultDate: '',
            showTodayButton: true,
            format: 'dd-mm-yyyy',
            showClose: true,
            showClear: true,
            toolbarPlacement: 'top',
            stepping: 15,
            autoclose: true,
            startView:3,
            minView: 2,
            language: 'es'
        });
    });

Начальная загрузка v3.0.2 ASP MVC 5


twitter-bootstrap asp.net-mvc asp.net-mvc-5 bootstrap-datetimepicker
person csuazo    schedule 24.10.2017    source источник
comment
какая у тебя версия бутстрапа?   -  person Aaqib    schedule 25.10.2017
comment
@Aaqib Я использую Bootstrap v3.0.2.   -  person csuazo    schedule 25.10.2017

Ответы (1)


arrow_upward
1
arrow_downward

Я считаю, что ваша проблема связана с тем, что вам не хватает div, обертывающего ваш элемент управления классом «input-group». Это дает ему относительное положение, которое требуется, поскольку средство выбора находится в абсолютном положении.

В документах есть следующий пример

<div class="form-group">
      <div class='input-group date' id='datetimepicker1'>
             <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar</span>
                    </span>
      </div>
</div>

https://eonasdan.github.io/bootstrap-datetimepicker/

person nado    schedule 25.10.2017
comment
Вы правы, я забыл поставить еще один div вокруг ввода и инициализировать этот div. - person csuazo; 25.10.2017