减少bootstrap时间选择器大小

Question

如何减少bootstrap timepicker大小？

我在我的项目中使用了bootstrap timepicker，但默认大小太大了。我想删除额外的填充和边距。我无法在inspect元素或fire-bug中看到它的css，因为小部件在失去焦点时消失了。

Answer 1

好的，我找到了如何减少bootstrap日期时间选择器的大小。 这里＃datetimepicker2 是我日期时间选择器的父div ID。所以请根据你的结构改变。

#datetimepicker2  .timepicker-picker  table td  a span,
#datetimepicker2  .timepicker-picker  table td,
#datetimepicker2  .timepicker-picker  table td  span
{height: 30px !important;line-height: 30px !important;width: 30px !important; line-height:30px !important; padding:0px !important;}

Answer 2

您可以将以下代码放入css主题文件中，以更改项目中所有时间戳的大小：

.bootstrap-datetimepicker-widget.timepicker-picker table td,
.bootstrap-datetimepicker-widget.timepicker-picker table td span,
.bootstrap-datetimepicker-widget.timepicker-picker table td a span
{height: 30px; line-height: 30px; width: 30px; padding:0px;}

这些设置将更改窗口小部件容器内元素的大小以及容器本身的高度。

您可以使用

更改小部件容器的宽度

.bootstrap-datetimepicker-widget.dropdown-menu {width: auto;}

但这往往会影响其他的datepicker容器，因此您需要将表格宽度设置回原始容器宽度，以强制容器恢复到之前的默认大小：

.bootstrap-datetimepicker-widget .datepicker table {width: 19em;}

（可能还有其他表需要调整大小，但我还没有研究过那些我不会使用的表。）

不必要的副作用：如果窗口小部件以类似timepicker-hours表格（比您的缩小高度timepicker-picker表格更高）和timepicker-hours容器的高度打开强制它在输入框上方而不是在下方呈现，js脚本根据较大的表计算小部件容器左上角的位置。然后，当您切换回较短的timepicker-hours表时，窗口小部件容器不会重新定位，因此timepicker-picker表似乎是浮动的，断开连接，远离输入框。

Answer 3

在调试模式下初始化datetimepicker

$('#datetimepicker1').datetimepicker(
{
    format: 'MM/DD/YYYY',
    debug: true
});

然后您将能够检查容器并应用类来更改大小。 在我的情况下工作只删除＆＃34;宽度＆＃34;属性。

css:
#MainCalendarDatePickerContainer .bootstrap-datetimepicker-widget {
    width: unset;
}

Answer 4

借助上述答案和一些细微的自定义，我将控件的大小调整为如下图所示：

   .bootstrap-datetimepicker-widget.dropdown-menu {
        width: auto;
    }

    .timepicker-picker table td a span,
    .timepicker-picker table td,
    .timepicker-picker table td span {
        height: 20px !important;
        line-height: 20px !important;
        vertical-align: middle;
        width: 30px !important;
        padding: 0px !important;
    }