Question

我的代码是这样的：

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

的大小

任何解决我问题的建议

谢谢

Answer 1

您可以使用.datepicker和.table-condensed选择器控制宽度：

＆＃13;

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

＆＃13;

.datepicker,
.table-condensed {
  width: 500px;
  height:500px;
}

＆＃13;

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

＆＃13;

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

控制大小

Answer 2

这是适合我的魔法。它在大多数浏览器中都表现良好。

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

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

Answer 3

在我的情况下，我只想给其他输入的日期输入提供相同的高度。这条线解决了它：

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

如何调整Bootstrap DatePicker的大小？

3 个答案: