javascript - Bootstrap 日期选择器不显示

Question

我的 html 中有一个 Bootstrap 日期选择器组件，但无法让它显示数据。我假设我把它错误地放入代码中。

$('#sandbox-container .input-daterange').datepicker({
    todayBtn: "linked",
    clearBtn: true,
    multidate: true,
    calendarWeeks: true,
    autoclose: true,
    todayHighlight: true,
    toggleActive: true,
    defaultViewDate: { year: 1977, month: 04, day: 25 }
});

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-daterange input-group" id="datepicker">
    <input type="text" class="input-sm form-control" name="start" />
    <span class="input-group-addon">to</span>
    <input type="text" class="input-sm form-control" name="end" />
</div>

Answer 1

查看日期选择器初始化代码

$('#sandbox-container .input-daterange').datepicker({
    ....
});

既然你有了这个html

<div class="input-daterange input-group" id="datepicker">
    <input type="text" class="input-sm form-control" name="start" />
    <span class="input-group-addon">to</span>
    <input type="text" class="input-sm form-control" name="end" />
</div>

上面的初始化代码将针对容器 div(带有 class="input-daterange input-group" 的容器)，而不是其中的两个文本框，因此这就是日期选择器不这样做的原因不出现。需要将上面的初始化代码改成这样

$('#datepicker .input-sm').datepicker({
    ....
});