如何调整 Bootstrap DatePicker 的大小？答案

【问题标题】：How to resize the Bootstrap DatePicker?如何调整 Bootstrap DatePicker 的大小？
【发布时间】：2016-04-28 17:46:49
【问题描述】：

我的代码是这样的：

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：

$(document).ready(function() {
    $('.datepicker').datepicker({
        autoclose: true,
        startDate: new Date()
    });
});

演示：jsfiddle

我想改变引导datepicker

的大小

任何解决我问题的建议

谢谢

【问题讨论】：

标签： jquery css twitter-bootstrap datepicker

【解决方案1】：

您可以使用.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>

您需要同时申请这两个，因为.table-condensed 有max-width:100%。如果你摆脱这个，你可以使用.datepicker控制大小

【讨论】：

@T J，非常感谢。我在工作。我想再问一次。是否可以改变datepicker的高度？
@mosestoh 增加会正常工作，我更新了示例。但是，它的最小高度约为 200 像素以显示那么多行……在 200 像素时，您必须从<td>s 中删除填充。如果您想低于该值，则必须进行进一步的自定义，例如更改字体大小
@T J，非常感谢

【解决方案2】：

这是对我很有效的魔法咒语。它在大多数浏览器中表现良好。

.datepicker,
.table-condensed {
    width: 220px;
    height: 220px;
    font-size: x-small; 
}

基本上，它显示引导日期选择器的缩小尺寸。

【讨论】：

【解决方案3】：

在我的例子中，我只想为日期输入赋予与其他输入相同的高度。这行解决了它：

$('input[type="date"]').height($('input').height());

【讨论】：