Question

我试图覆盖datepicker的JQuery CSS属性，但它没有显示任何效果。我想在datepicker中增加月份组合框的宽度。

我通过执行

覆盖了JQuery UI CSS的属性

.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
width: 50% !important;
}

默认情况下为49％。它似乎不起作用。请指导。

Answer 1

可能有几件事情。你的选择器可能是错误的，或者不够具体。如果您复制了确切的选择器，请仔细检查您是否复制了他们使用的确切选择器。

样式表的顺序可能有误。确保在你的之前加载了jquery.ui.css和主题文件。

它可能是别的东西。我发现调试此类内容的最佳方法是在Chrome开发者工具的样式面板中。转到显示计算的选项卡;选择宽度;然后单击它显示width的位置，它会将您带到创建该规则的选择器。取消选中宽度规则，然后查看应用了width规则的内容。最终，您将取消选中所有应用的宽度规则，或找出哪一个覆盖您的规则。

您可能还会发现其他内容 - 您的规则根本未加载。也许你正在使用样式表的缓存版本等。

这个规则肯定是可以覆盖的 - 在某个地方有逻辑错误或错字，你只需要找到它。

Answer 2

您可以使用：

    #ui-datepicker-div  {
        width: 50%; !important;
    }

或：

    .ui-datepicker.ui-widget {
        width: 50%; !important;
    }

或者，更准确地说，在jQuery准备中你可以做到：

$(function () {
  $( "#datepicker" ).datepicker().on('focus', function(e) {
    $( "#datepicker" ).datepicker('widget').width('90%');
  });
});

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<p>Date: <input type="text" id="datepicker"></p>

只使用样式表：

$(function () {
  $('#zzz').datepicker();
  $( "#datepicker" ).datepicker();
});

#ui-datepicker-div  {
  width: 90%; !important;
}

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>


<p>Date: <input type="text" id="datepicker"></p>
<p>Date: <input type="text" id="zzz"></p>

所以，我建议使用第一个，因为这样你就可以设置特定日期选择器的宽度，而不是全部。

每当打开一个datepicker时，都会在文档中添加一个新的div元素。使用jQuery 1.12，此面板的ID始终为 'ui-datepicker-div'

覆盖JQuery UI CSS属性？

2 个答案: