Css 使用numberOfMonths时jQuery UI日期选择器的宽度：[2,6]_Css_Jquery Ui_Jquery Ui Datepicker

Css 使用numberOfMonths时jQuery UI日期选择器的宽度：[2,6]

css jquery-ui

Css 使用numberOfMonths时jQuery UI日期选择器的宽度：[2,6],css,jquery-ui,jquery-ui-datepicker,Css,Jquery Ui,Jquery Ui Datepicker,我目前正在使用jQueryUI中的小部件进行实验。使用jQueryUI版本1.11.4进行即时通讯我已经下载了jQueryUI的示例文件，其中包含index.html中所有小部件的简短演示。日期选择器的html代码如下：  <h2 class="demoHeaders">Datepicker</h2> <div id="datepicker"></div> 但我的配置B有

我目前正在使用jQueryUI中的小部件进行实验。使用jQueryUI版本1.11.4进行即时通讯

我已经下载了jQueryUI的示例文件，其中包含index.html中所有小部件的简短演示。日期选择器的html代码如下：

   <!-- Datepicker -->
   <h2 class="demoHeaders">Datepicker</h2>
   <div id="datepicker"></div>

但我的配置B有问题

   $( "#datepicker" ).datepicker({
       numberOfMonths: [2, 6],
   });

在这里，日期选择器的宽度似乎大于必要的宽度，这会导致灰色背景向右偏得太远。我在那个区域放了一个“？”

在Chrome开发工具中，我可以看到应用于它的类和css。样式中的宽度似乎是原因，但这是由jQuery生成的

<div class="ui-datepicker-inline ui-datepicker ui-widget ui-widget-content 
ui-helper-clearfix ui-corner-all ui-datepicker-multi-6 ui-datepicker-multi" 
style="width: 102em; display: block;">

演示：


JS-Bin
jQuery UI日期选择器-显示多个月
$（函数（）{
$（“#日期选择器”）。日期选择器({
月数：[2,6]，
showButtonPanel：对
});
});
日期：

在尝试了各种可能的解决方案后，我找到了一种最适合我的解决方案，所以我在这里回答了自己的问题

如上所述，主要问题是jQueryUI使用内联样式应用宽度

<div class="ui-datepicker-inline ui-datepicker ui-widget ui-widget-content 
ui-helper-clearfix ui-corner-all ui-datepicker-multi-6 ui-datepicker-multi" 
style="width: 102em; display: block*;"

我有一个id为“calendar”的div，JQuery日期选择器放在其中。因此，我使用这个JQuery命令在运行时删除style属性

此外，我自己编写了一些css来设置宽度：

#calendar .ui-datepicker-inline {
    display: block;
    width: 100%;
}

起初，这似乎是可行的，但有些事件会导致重新应用原始的错误宽度（例如，选择日期、刷新小部件等）。我意识到我不想一次又一次地为这些事件动态删除样式

解决方案2：更改创建样式的JQuery UI代码

我最终决定修复jqueryui中导致这种情况的代码，即生成具有宽度的样式的代码

可以在JQuery UI源文件中的_updateDatepicker函数中找到它

我更改了以下内容：

之前：

inst.dpDiv.addClass("ui-datepicker-multi-" + cols).css("width", (width * cols) + "em");

之后：

inst.dpDiv.addClass("ui-datepicker-multi-" + cols);

这样做的想法来自JQuery论坛中的一个线程，其中一个用户有相同的问题。

在尝试了不同的可能解决方案后，我找到了一个最适合我的解决方案，所以我在这里回答了自己的问题