jQuery 如何调整 Bootstrap DatePicker 的大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34941412/
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
How to resize the Bootstrap DatePicker?
提问by moses toh
My code is like this :
我的代码是这样的：
HTML :
HTML :
<div class="input-append date datepicker no-padding" data-date-format="dd-mm-yyyy">
<input class="input-medium" size="16" type="text"><span class="add-on"><i class="icon-th"></i></span>
</div>
Javascript :
Javascript :
$(document).ready(function() {
$('.datepicker').datepicker({
autoclose: true,
startDate: new Date()
});
});
Demo : jsfiddle
演示：jsfiddle
I want to change the size of the bootstrap datepicker
我想更改引导日期选择器的大小
Any suggestion to solve my problem
任何解决我的问题的建议
Thank you
谢谢
回答by T J
You can control the width using .datepickerand .table-condensedselectors:
您可以使用.datepicker和.table-condensed选择器控制宽度：
$(document).ready(function() {
$('.datepicker').datepicker({
autoclose: true,
startDate: new Date()
});
});.datepicker,
.table-condensed {
width: 500px;
height:500px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker.css" rel="stylesheet" />
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<script src="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<div class="input-append date datepicker no-padding" data-date-format="dd-mm-yyyy">
<input class="input-medium" size="16" type="text"><span class="add-on"><i class="icon-th"></i></span>
</div>You need to apply both because .table-condensedhas max-width:100%. if you get rid of this you can control the size using .datepicker
您需要同时应用两者，因为.table-condensed有max-width:100%. 如果你摆脱了这个，你可以使用控制大小.datepicker
回答by Robert
Here is the magic spell that worked well for me. And it does well in most browsers.
这是对我很有效的魔法咒语。它在大多数浏览器中表现良好。
.datepicker,
.table-condensed {
width: 220px;
height: 220px;
font-size: x-small;
}
Basically, it displays a scaled down size of the bootstrap datepicker.
基本上，它显示了引导日期选择器的缩小尺寸。
回答by siderio2
In my case, I just wanted to give the same height to the date input as the other inputs have. This line solved it:
就我而言，我只想为日期输入提供与其他输入相同的高度。这条线解决了它：
$('input[type="date"]').height($('input').height());
