Bootstrap 3 daterange 在表单中选择 [英] Bootstrap 3 daterange select in form

问题描述

我正在尝试添加日期范围 (.

我应该如何构建我的表单以使这个日期范围看起来不错?我想让这 2 个输入和to"与其他输入具有相同的宽度并具有相同的焦点颜色.

这是我要玩的表格:http://jsfiddle.net/Misiu/a3NV4/

解决方案

参见此处示例.

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

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

JS

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

I'm trying to add daterange (https://github.com/eternicode/bootstrap-datepicker) select to my bootstrap 3 form. I've added form element to my form:

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

But I get weird looking inputs:

I would like it to look as here.

How should I build my form to get this daterange to look nice? I would like to have those 2 inputs and "to" to be same width as other inputs and have same focus color.

Here is my form to play with: http://jsfiddle.net/Misiu/a3NV4/

解决方案

See here example.

To work on 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({});

这篇关于Bootstrap 3 daterange 在表单中选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！