使用bootstrap datetimepicker时出错

Question

我尝试使用datetimepicker中的bootstrap-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'
        });
    });

Bootstrap v3.0.2 ASP MVC 5

Answer 1

我相信你的问题是因为你错过了一个包裹你的控件“div-group”类的div。这使得它具有相对位置，因为拾取器位于绝对位置。

文档有以下示例

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