twitter-bootstrap Bootstrap 3 daterange 在表单中选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20802296/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 daterange select in form
提问by Misiu
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:
我正在尝试将 daterange ( https://github.com/eternicode/bootstrap-datepicker) select添加到我的引导程序 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>
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.
我应该如何构建我的表单以使这个日期范围看起来不错？我想让这 2 个输入和“to”与其他输入的宽度相同并具有相同的焦点颜色。
Here is my form to play with: http://jsfiddle.net/Misiu/a3NV4/
这是我要玩的表格：http: //jsfiddle.net/Misiu/a3NV4/
回答by dima_horror
See here example.
见这里的例子。
To work on Bootstrap 3 http://jsfiddle.net/a3NV4/4/
使用 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
JS
$('.input-daterange').datepicker({});
回答by Markus Kottl?nder
You are working with Bootstrap 3 and the datepicker plugin is for bootstrap 2.3, that is the problem. So you have to use the according bootstrap 3 classes:
您正在使用 Bootstrap 3，而 datepicker 插件适用于 bootstrap 2.3，这就是问题所在。所以你必须使用相应的引导程序 3 类：
<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>
