如何调整 Bootstrap DatePicker 的大小？

Posted 2023-05-07

【中文标题】如何调整 Bootstrap DatePicker 的大小？

【英文标题】：How to resize the 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

的大小

任何解决我问题的建议

谢谢

【参考方案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());