如何覆盖 jquery ui-datepicker 样式？答案

【问题标题】：How to overwrite jquery ui-datepicker style?如何覆盖 jquery ui-datepicker 样式？
【发布时间】：2017-09-08 06:37:02
【问题描述】：

我们在旧系统上使用 ui-datepicker。它通过向 div 添加样式来设置组件样式，例如

<div id="ui-datepicker-div" class="ui-corner-all ui-datepicker ui-helper-clearfix ui-widget ui-widget-content" style="left: 1078px; position: absolute; top: 316px; z-index: 100; display: block;">

我们如何覆盖添加的样式（它在移动设备中不起作用......）

【问题讨论】：

请多解释一下你的问题。
当日期选择器在移动设备中打开时，该站点为baco.co.il，它位于右侧并隐藏我想将其放在左侧。这是一张正常的图片（不是手机）prntscr.com/evjnx5
为此，您需要在 head 标签中写入内联 css，然后只有您可以覆盖它。
没用prntscr.com/evjsqw
您是否从内联中删除？？

标签： jquery jquery-ui datepicker

【解决方案1】：

我们如何覆盖添加的样式

覆盖内联样式的一种方法是在外部 CSS 样式表的每个属性/值上使用 !important。

#ui-datepicker-div{
   left: 1078px !important; 
   position: absolute !important; 
   top: 316px !important;
   ....
   ....
}

然后只包含所有其他必要的属性/值对。

【讨论】：

我试过了，,, 没用 - 我假设 datepicker 中的 js 每次打开窗口时都会放置样式
@user1726407 是的，这也是一种可能性，但我会考虑其他解决方案，因为这是覆盖内联样式的典型方法。

【解决方案2】：

我也遇到了这个问题，所以将我的解决方案发布给未来的用户：

样式属性是在页面加载后触发日期选择器对象时动态添加的，因此分配给“#ui-datepicker-div”的任何样式属性都会被覆盖，无论是否带有“！important”。

我的解决方法是在触发日期选择器后重新分配我的样式：

        $('#date').click(function () {
            $("#ui-datepicker-div").css('z-index', '9999');
        });

在我的例子中，带有 ID 日期的元素被单击以显示 datepicker 对象。希望这会有所帮助！

【讨论】：