使用 bootstrap 日期时间选择器时出错

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>   

我这样初始化日期时间选择器：

$(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 ASPMVC 5

Answer 1

我认为你的问题是因为你缺少一个 div 包装你的控件 class “输入组”。这给了它一个相对位置，因为选择器是绝对定位的。

文档中有以下示例

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