Wiele jQuery UI data zbieracze o różnej stylizacji

Question

Mam dwie daty jQuery zbieraczy na mojej stronie:

• Regularne jeden
• A „specjalny”, który może odebrać tylko lat/miesięcy.

Ta specjalna używa jakiegoś niestandardowego CSS (from here), aby ukryć część kalendarza, więc pojawia się tylko miesiąc/rok.

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

Ponieważ jednak na stronie znajduje się tylko jedno okno dialogowe, kalendarz jest ukryty dla obu podmiotów śledzących.

Czy istnieje sposób zastosowania tego stylu tylko do jednej z instancji? Sprawdziłem dokumenty, aby zobaczyć, czy mogę dodać niestandardową klasę do okna dialogowego, ale nie mogłem jej znaleźć.

Answer 1

Można uruchomić zmianę css ręcznie w zdarzeniu beforeShow, dla każdego wejścia. Kod będzie wyglądał następująco:

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

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

Nie przetestowałem tego kodu, ale powinieneś otrzymać jist. Mam nadzieję, że pomaga!

Answer 2

Rozwiązuję ten sam problem. Powyższa odpowiedź nie działa. Co zrobił prace rozwiązanie zawarte w tym komentarzu: http://www.filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/#commentNumber16

I zostały zmodyfikowane go trochę i oto co mam:

$('#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'); 
    } 
}); 

Sprawdziłem to i to działa.

Answer 3

I sugerują, że zamiast za pomocą CSS, należy postępować https://stackoverflow.com/a/6013093 zamiast tworzyć ten sam efekt poprzez ukrywanie kalendarza gdy zdarzenie ostrości jest wyzwalany za „specjalne” datepicker.

Jeśli używasz CSS, możesz dołączać datepickery do elementów div zamiast elementów wejściowych. W ten sposób każdy kalendarz .ui-datepicker znajduje się we własnym dziale div i możesz zastosować oddzielne style. Wady polegają na tym, że masz div zamiast input, które pojawiają się natychmiast po załadowaniu strony i nie masz zdarzenia onClose. Oto minimalny kod, który sprawi, że zadziała.

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; 
    }