减少bootstrap时间选择器大小

Question

如何减少bootstrap timepicker的大小？

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

Answer 1

在调试模式下初始化日期时间选择器

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

然后您将能够检查容器并应用类来更改大小。在我的情况下，只删除了“宽度”属性。

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

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

好的,我发现如何减少bootstrap日期时间选择器的大小.这里#datetimepicker2是我日期时间选择器的父div.所以请根据你的结构改变.

#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;}