Question

如何在显示多个月时设置datepicker div的宽度？我已经尝试更改.ui-datepicker-group和.ui-datepicker-multi的css，但是当我在Firebug中查看它时，宽度会被覆盖。

Answer 1

对于将来会有同样问题的人：

也可以使用“max-width”属性：

.ui-datepicker{
  max-width: 1024px;
}

你也可以像Awais一样修改字体大小，这是一个好主意。使用宽度的最后一种可能性是在datepicker JQuery UI配置中使用多列月份。

例如：

$( "#datepicker" ).datepicker({
    numberOfMonths: [2,6] # 2: number of month per column, 6: number of columns
});

这将创建6列，每列2个月，因此您将在两条线上完美显示12个月并正确设置宽度。

Answer 2

div.ui-datepicker{
 font-size:10px;
}

这会对你有所帮助

Answer 3

我认为不可能设置宽度。宽度似乎硬编码为51em。我提出的最好的解决方案是调整字体大小，直到我得到我需要的大小。

Answer 4

无论CSS说什么，改变宽度的最佳方法是：

找到有datapicker的js文件（通常是jquery.ui.datepicker.js）
查找

var origyearshtml， numMonths = this._getNumberOfMonths（inst）...

在那条或同一条线下，您会注意到width = 17;
将其更改为您的首选宽度。

这是使用多个月时唯一适用于我的解决方案。

Answer 5

这对我有用。我在底部，封闭的身体标签上面有这个脚本：

<script type="text/javascript">
    $("document").ready(function(){

        $(".ui-datepicker-inline").width("75em");
    });
</script>

Answer 6

打开jQuery UI datepicker javascript文件并更改'r'变量

_updateDatepicker: func...
...
r=17;

到您喜欢的EM宽度。

Answer 7

将jquery-ui.js保存在开发包中，搜索此

（inst.dpDiv.addClass（'ui-datepicker-multi-'+ cols）.css（'width'，这里设置宽度为px或em，记住''）

$("document").ready(function(){

    $(".ui-datepicker-inline").width("75em");
});

该代码有效，但是当修改了datepicker时，jquery-ui会更新宽度，因此它仅适用于首次加载。

Answer 8

我找到了解决这个问题的方法;将“min-width”设置为（内联）容器和组。

实施例：

.ui-datepicker-inline { min-width: 1848px; }
.ui-datepicker-group { min-width: 308px; }

内联宽度样式将被jQuery覆盖，但全局最小宽度值将否决该宽度值。

注意：您还可以使用此技巧通过javascript / jQuery计算响应大小。将宽度设置为容器和组元素将不起作用;当datepicker刷新时，它们将被覆盖。因此，创建一个样式元素并注入css规则。 jQuery片段：

var $myExampleCalendarParentContainer = jQuery('.your-selector-here');
var $style = $myExampleCalendarParentContainer.children('style');
var $calendarContainer = $myExampleCalendarParentContainer.find('.ui-datepicker-inline');
var $items = $calendarContainer.find('.ui-datepicker-group');
var monthWidth = 300; //desired pixel width per month

$style.html(
    '.ui-datepicker-inline { min-width:' + monthWidth * $items.length + 'px; }'
    + '.ui-datepicker-group { min-width:' + monthWidth + 'px; }'
);

Answer 9

这对我有用。你当然可以设置你想要的任何宽度。

.ui-datepicker-multi {width:100% !important}

Answer 10

这为我修好了

  .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    visibility: hidden;
     width:100% !important;
}

 .ui-datepicker-group {width:100% !important}`

如何设置多个月的jquery ui datepicker的宽度

10 个答案: