Bootstrap 3 daterange 在表单中选择

Question

我正在尝试将 daterange (https://github.com/eternicode/bootstrap-datepicker) 选择添加到我的 bootstrap 3 表单中。 我在表单中添加了表单元素：

<div class="form-group">
    <label class="col-sm-3 control-label">Dates range</label>
    <div class="col-sm-9">
        <div class="input-daterange" id="datepicker">
            <input type="text" class="input-small" name="start"/>
            <span class="add-on">to</span>
            <input type="text" class="input-small" name="end"/>
        </div>
    </div>
</div>

但我得到了看起来很奇怪的输入：

我希望它看起来像 here。

我应该如何构建我的表单以使这个日期范围看起来不错？我希望这两个输入和“to”与其他输入具有相同的宽度并具有相同的焦点颜色。

这是我的表单：http://jsfiddle.net/Misiu/a3NV4/

Answer 1

您正在使用 Bootstrap 3，而 datepicker 插件适用于 bootstrap 2.3，这就是问题所在。所以你必须使用相应的引导 3 类：

JSFIddle

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

Answer 2

看这里的例子。

在 Bootstrap 3 上工作 http://jsfiddle.net/a3NV4/4/

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

JS

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