如何在同一页面为两个jQuery UI日历设置不同样式？

你遇到的核心问题是：jQuery UI的Datepicker弹窗元素并不是作为输入框的子节点生成的，它会被直接插入到<body>标签下，所以你用#datepicker .ui-widget-content这种选择器根本找不到目标元素——因为.ui-widget-content和输入框#datepicker不是父子关系。

下面给你两种可行的解决方案，推荐第一种，更灵活且不会影响布局：

方法一：通过beforeShow事件给日历添加自定义类 #

我们可以利用Datepicker的beforeShow回调，在日历弹窗显示前给它的容器添加自定义类名，然后通过这个类来写差异化样式。

修改后的完整代码如下：

<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script>
$(document).ready(function(){
  $( "#datepicker" ).datepicker({
    beforeShow: function(input, inst) {
      // 给当前日历的容器添加自定义类
      inst.dpDiv.addClass('datepicker-pink');
    }
  });
  $( "#datepicker2" ).datepicker({
    beforeShow: function(input, inst) {
      inst.dpDiv.addClass('datepicker-green');
    }
  });
});
</script>
<style>
/* 第一个日历的样式 */
.datepicker-pink .ui-widget-content {
  color: pink;
  /* 如果要单独设置顶部标题栏，用.ui-widget-header */
  /* .ui-widget-header { background: pink; } */
}
/* 第二个日历的样式 */
.datepicker-green .ui-widget-content {
  color: green;
}
</style>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
<p>Date2: <input type="text" id="datepicker2"></p>
</body>
</html>

代码说明： #

• beforeShow事件会在日历弹窗即将显示时触发，参数里的inst.dpDiv就是日历弹窗的DOM容器
• 给每个日历添加独特的类名后，CSS就能精准选中对应的日历元素，不会互相干扰
• 如果你想单独修改日历顶部的标题栏（比如背景色），可以把选择器换成.datepicker-pink .ui-widget-header，这才是标题栏的类名

方法二：用appendTo把日历插入到输入框的父元素 #

这种方法是让日历弹窗成为输入框的子节点，这样你原来的CSS选择器就能生效，但可能会影响页面布局（比如弹窗位置偏移），需要额外调整：

$( "#datepicker" ).datepicker({
  appendTo: "#datepicker-container" // 把日历插入到指定容器
});

然后把输入框放到一个带ID的容器里：

<p id="datepicker-container">Date: <input type="text" id="datepicker"></p>

此时你的原CSS选择器#datepicker-container .ui-widget-content就能生效了，但这种方法不如第一种灵活，不推荐优先使用。

内容的提问来源于stack exchange，提问作者vytaute