引导日期选择器不适用于 div，答案

【问题标题】：Bootstrap datepicker not working on div,引导日期选择器不适用于 div，
【发布时间】：2016-06-27 11:48:21
【问题描述】：

我在我的 HTML 中使用 bootstrap datepicker。

<div class="col-md-5">
    <div>
        <input id="my-date-picker" type="text" class="form-control"  readonly required>
    </div>
</div>

当我在输入元素上使用$('#my-date-picker').datepicker() 时，所有bootstrap datepicker methods 都可以正常工作。

但是当我使用

<div class="col-md-5">
    <div id="my-date-picker">
        <input type="text" class="form-control" readonly required>
    </div>
</div>

这些方法不起作用。我在这里做错了吗？

【问题讨论】：

标签： javascript jquery twitter-bootstrap datepicker

【解决方案1】：

你必须分配给输入的 id，而不是 div

这个。

<div class="col-md-5">
    <div >
        <input id="my-date-picker" type="text" class="form-control" readonly required>
    </div>
</div>

【讨论】：

【解决方案2】：

您的第二个 HTML 示例在 input 上没有 id 属性，这是您需要在其上实例化 datepicker() 的元素。

你需要使用这个，id 直接在input 上：

<div class="col-md-5">
    <div>
        <input id="my-date-picker" type="text" class="form-control" readonly="true" required="true">
    </div>
</div>

$('#my-date-picker').datepicker()

或者这样，id 在父 div 上，而您选择子 input：

<div class="col-md-5">
    <div id="my-date-picker">
        <input type="text" class="form-control" readonly="true" required="true">
    </div>
</div>

$('#my-date-picker input').datepicker()

【讨论】：

使用的是datetimepicker()，而不是datepicker()。这意味着他的示例使用了不同的日期选择器库。