Error using bootstrap datetimepicker

Question

I'm trying to use bootstrap-datetimepicker from datetimepicker , but when the date picker is displayed, this covers the input.

The code that I use is something like this:

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

I initialize the Datetimepicker like this:

$(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'
        });
    });

Bootstrap v3.0.2 ASP MVC 5

Answer 1

I believe your issue is because you are missing a div wrapping your control the class “input-group”. This gives it a relative position which is required as the picker is positioned absolute.

The docs have the following example

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