Question

我目前正在尝试使用jQuery UI中的DatePicker小部件。我是一个使用jQuery UI版本1.11.4

我已经下载了jQuery UI的示例文件，其中包含index.html中所有小部件的简短演示。 datepicker的html代码是：

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

我想在日期选择器中显示12个月，以将其用作日历。我尝试了两种配置：

配置A：3行，4个月
配置B：2行，6个月

配置A工作正常：

     $( "#datepicker" ).datepicker({
         numberOfMonths: [3, 4],
     });

但我＆＃39;我遇到配置B的问题

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

此处，日期选择器的宽度似乎大于必要的宽度，这会导致灰色背景向右移动太远。我已经放了一个＆＃39;？＆＃39;到那个地区。

在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;">

样本：

＆＃13;

<!DOCTYPE html>
<html>
<head>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Display multiple months</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({
      numberOfMonths: [2,6],
      showButtonPanel: true
    });
  });
  </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker"></p>
 
 
</body>
</html>
</body>
</html>

＆＃13;

能不能以某种方式帮助我如何在6个月内显示2行且宽度不正确？谢谢。

参见jsfiddle：

你也可以在这里看到：jsfiddle.net/tvm6jrf5/1/

Answer 1

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

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

<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*;"

因此无法使用CSS解决此问题，因为由于datepicker的内联样式而无法应用CSS：

解决方案1：在运行时动态删除样式

这是我的第一个方法：

$("#calendar .ui-datepicker-inline").removeAttr("style");

我有一个id为＆＃34;日历＆＃34;放置JQuery datepicker的地方。所以我使用这个JQuery命令在运行时删除了style属性。

另外我写了一些css来自己设置宽度：

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

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

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

我最终决定在JQuery UI中修复导致这种情况的代码，即生成宽度样式的代码。

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

我更改了以下内容：

在：

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

后：

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

这样做的想法来自JQuery论坛中的this线程，用户遇到了同样的问题。

使用numberOfMonths时jQuery UI datepicker的宽度：[2,6]

1 个答案: