同一页面上两个日历的不同设计答案

【问题标题】：Different design for two calendars on the same page同一页面上两个日历的不同设计
【发布时间】：2019-08-09 11:30:05
【问题描述】：

我试图在同一个 .html 文件中制作两个日历，但设计不同。具体来说，我需要不同颜色的 .ui-widget-content （日历顶部）。

我尝试向每个输入添加和 id，然后对它们进行 css 处理，但它不起作用。也许我必须以其他方式将 id 或 class 添加到 datepicker 元素中，而不仅仅是内联编写它？那么如何在同一页面上以不同方式设置两个 JQuery UI 日历的样式呢？

<!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">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
	$(document).ready(function(){
		$( "#datepicker" ).datepicker();
		$( "#datepicker2" ).datepicker();
	});  
  </script>
  
  <style>
	#datepicker .ui-widget-content {
		color: pink;
	}
	#datepicker2 .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>

当我只添加没有子类或子 ID 的 CSS 时，CSS 可以正常工作，但是当我尝试为每个日历指定它时，设计不会改变。

【问题讨论】：

标签： javascript jquery html css datepicker

【解决方案1】：

您可以将一个类添加到特定的日期选择器，然后使用该类您可以覆盖它检查 sn-p。

使用添加类

我添加了一个类aa

$("#datepicker2").datepicker({
        beforeShow: function(input, inst) {
          $(inst.dpDiv).addClass('aa');
        }
      });

覆盖 Css

.aa a.ui-state-default {
  background: green;
}

.aa a.ui-state-default {
  background: green;
}

<!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">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
    $(document).ready(function() {
      $("#datepicker").datepicker({
        beforeShow: function(input, inst) {
          $(inst.dpDiv).removeClass('aa');
        }
      });
      $("#datepicker2").datepicker({
        beforeShow: function(input, inst) {
          $(inst.dpDiv).addClass('aa');
        }
      });
    });
  </script>

  <style>
    #datepicker .ui-widget-content {
      color: pink;
    }
    
    #datepicker2 .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>

【讨论】：

成功了！同样对于我想要的结果 alphaColor css 应该如下所示： .alphaColor .ui-widget-header { color: pink;}
非常感谢，我为此搜索了 5 个小时：/
StackOverflow 改变了游戏规则，所以每当您遇到问题时，您都会很快得到解决方案。

【解决方案2】：

问题在于 datepicker Dom 元素不是您输入的子元素。但是直接添加到dom中。只需在初始化时添加一个类

<!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">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
	$(document).ready(function(){
		$( "#datepicker" ).datepicker({
      beforeShow: function(input, inst) {
         $('#ui-datepicker-div').removeClass('betaColor').addClass('alphaColor');
         }
      });
		$( "#datepicker2" ).datepicker({
    beforeShow: function(input, inst) {
       $('#ui-datepicker-div').removeClass('alphaColor').addClass('betaColor');
       }
   });
	});  
  </script>
  
  <style>
	.alphaColor {
		color: pink;
	}
	.betaColor {
		color: green;
	}
	</style>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker"></p>
<p>Date2: <input type="text" id="datepicker2"></p>

</body>
</html>

【讨论】：

谢谢！这也很好用（以及第一个答案）

【解决方案3】：

或者你可以试试这个：

如果你想添加 css 参数，你可以使用：

 <script>
  $(document).ready(function(){
  $("input#datepicker").focus(function() { 
            $("#ui-datepicker-div").css("background", "red"); 
        }); 
  });  
  </script>
  <script>
  $(document).ready(function(){
  $("input#datepicker2").focus(function() { 
            $("#ui-datepicker-div").css("background", "purple"); 
        }); 
  });  
  </script>

或者您可以使用 addclass jquery 方法并将样式添加到您的 css 文件中。

 <script>
  $(document).ready(function(){
  $("input#datepicker").focus(function() { 
            $("#ui-datepicker-div").addClass("dpicker1"); 
        }); 
  });  
  </script>
  <script>
  $(document).ready(function(){
  $("input#datepicker2").focus(function() { 
            $("#ui-datepicker-div").addClass("dpicker2");
        }); 
  });  
  </script>

并将样式代码添加到您的 css 文件中，如下所示：

.dpicker1 {background:red}
.dpicker2 {background:purple}

例如：https://jsfiddle.net/4obL2v15/

【讨论】：