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

whats your bootstrap version ?

Aaqib
– Aaqib

2017-10-24 23:36:48 +00:00
Commented Oct 24, 2017 at 23:36 — Aaqib
– Aaqib, Commented Oct 24, 2017 at 23:36
@Aaqib I'm using Bootstrap v3.0.2.

csuazo
– csuazo

2017-10-24 23:40:17 +00:00
Commented Oct 24, 2017 at 23:40 — csuazo
– csuazo, Commented Oct 24, 2017 at 23:40

nado · Accepted Answer · 2017-10-25 03:27:24Z

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/

edited Oct 25, 2017 at 3:27

answered Oct 25, 2017 at 0:41

nado

1032 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

csuazo Over a year ago

You are right, I was forgot put another div surrounding the input, and initialize that div.

Collectives™ on Stack Overflow

Error using bootstrap datetimepicker

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related