多個不同的造型

Question

jQuery UI的日期選擇器我有我的頁面上有兩個jQuery的日期選擇器：

• 有規律的一個
• 「特殊」一說只能挑選歲/月。

特殊的使用一些自定義CSS（from here）來隱藏日曆部分，所以只顯示月份/年份。

.ui-datepicker-calendar { 
    display : none ; 
} 

但是，由於頁面上只有一個對話框實例，所以兩個拾取器都隱藏日曆。

有沒有辦法只將這種風格應用於其中一個實例？我檢查了文檔，看看是否可以將自定義類添加到對話框中，但我找不到它。

Answer 1

您可以在beforeShow事件中手動更改每個輸入的css。該代碼將如下所示：

$("#regularInput").datepicker({ 
        beforeShow: function(input, inst) { 
            $(".ui-datepicker-calendar").show(); 
           } 
        }); 

$("#specialInput").datepicker({ 
        beforeShow: function(input, inst) { 
            $(".ui-datepicker-calendar").hide(); 
           } 
        }); 

我還沒有測試過該代碼，但您應該獲得jist。希望有所幫助！

Answer 2

我正在解決同樣的問題。上面的答案不起作用。什麼做的工作是在此評論所提供的解決方案：http://www.filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/#commentNumber16

我已經修改了它一下，這裏就是我的了：

$('#startDate').datepicker({ 
    beforeShow: function(input, inst) { 
     var newclass = 'calendar-base hideDates'; 
     var p = inst.dpDiv.parent(); 
     if (!p.hasClass('calendar-base')) 
      inst.dpDiv.wrap('<div class="'+newclass+'"></div>'); 
     else 
      p.removeClass('showDates').addClass('hideDates'); 
    } 
}); 
$('#birthDate').datepicker({ 
    beforeShow: function(input, inst) { 
     var newclass = 'calendar-base showDates'; 
     var p = inst.dpDiv.parent(); 
     if (!p.hasClass('calendar-base')){ 
      inst.dpDiv.wrap('<div class="'+newclass+'"></div>'); 
     else 
      p.removeClass('hideDates').addClass('showDates'); 
    } 
}); 

我檢查了它和它的作品。

Answer 3

我建議，而不是使用CSS，你應該遵循https://stackoverflow.com/a/6013093而是通過隱藏在觸發你的「特殊」的日期選擇器的焦點事件日曆產生相同的效果。

如果您使用CSS設置，則可以將日期選擇器附加到div元素而不是輸入元素。這樣每個.ui-datepicker-calendar都在它自己的div內，你可以應用不同的樣式。缺點是你有div而不是輸入，當你加載頁面時會立即出現，並且沒有onClose事件。這是最低限度的代碼，以使其工作。

HTML：

<div id="startDate" class="date-picker" /> 
    <div id = "special-datepicker" class = "date-picker" </div> 

的Javascript：

$(function() { 
     $('.date-picker').datepicker({}); 
    }); 

CSS：

#special-datepicker .ui-datepicker-calendar { 
     display: none; 
    }