同一頁上兩個日歷的不同設計
[英]Different design for two calendars on the same page
問題描述
我試圖在同一.html文件中制作兩個日歷，但設計不同。 具體來說，我需要使用.ui-widget-content（日歷頂部）的不同顏色。
我嘗試將id和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不會改變。
3 個解決方案
解決方案1
2 已采納 2019-08-09 11:35:33
您可以將一個類添加到特定的日期選擇器，然后使用該類可以覆蓋它的檢查代碼段。
使用添加課程
我添加了一個類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>
解決方案2
2 2019-08-09 11:40:07
問題在於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
1 2019-08-09 11:59:43
或者，您可以嘗試以下操作：
如果要添加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}
FullCalendar jQuery插件：在同一頁面的兩個日歷之間移動事件
[英]FullCalendar jquery plugin: Move events between 2 calendars on the same page
Ext JS datepicker，從兩個不同的日歷獲取日期范圍
[英]Ext JS datepicker, get a date range from two different calendars
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.