Modyfikuj datakicker jquery z CSS z beforeShowDay

Question

Używam beforeShowDay i przypisałem klasę specialDay do określonych dni w moim kalendarzu; działa to dobrze, ale mam problem ze zrozumieniem, jak styl klasy i jak działa css z walca tematycznego. Próbowałem:

td .specialDate { 
    background: #33CC66; 
} 

, ale nie ma to wpływu na wygląd kalendarza. Jakieś pomysły?

Answer 1

Zawsze, gdy używam interfejsu użytkownika JQuery, używam Firebug do sprawdzania stylów zastosowanych do poszczególnych elementów, co pozwoli ci łatwo zidentyfikować elementy CSS, z którymi chcesz się bawić.

Answer 2

Miałem ten sam problem, na szczęście znalazłem odpowiedź. Po wyłączeniu dnia (ustawionego na "false") można przypisać klasę (".specialDate"), aby zmienić kolor tła, ale nie, jeśli data jest włączona, ponieważ mamy kolejną stylizowaną kotwicę ("a") która przesłania klasę przypisaną do kotwicy "td".

Dlatego, jeśli data jest włączona, aby wybrać i chcesz zmienić styl, trzeba zmodyfikować odziedziczone „a” kotwicę, tak:

.specialDate a { background: #33CC66 !important; } 

To bardzo ważne, aby dodać "! important "(jeśli wybaczycie powtórzenie) wskazanie, aby zastąpić inne ustawienia.

Mam nadzieję, że to pomoże!

Answer 3

.specialDate span {background-color:#ff0000!important;} 

jeśli chcesz wyłączyć efekt przezroczystości

.specialDate {filter:Alpha(Opacity=100)!important; opacity: 1!important} 

Answer 4

Stwórz swój styl css tak:

<style type="text/css"> 
    td.specialDay, table.ui-datepicker-calendar tbody td.specialDay a { 
    background: none !important; 
    background-color: #fffac2 !important; 
    color: #006633; 
    } 
</style> 

Następnie dodać swój styl do kalendarza za pomocą opcji beforeShowDay.

$('#datepicker').datepicker('option', 'beforeShowDay', highlightDays); 


// ------------------------------------------------------------------ 
// highlightDays 
// ------------------------------------------------------------------ 
function highlightDays(date) { 
    for (var i = 0; i < dates.length; i++) { 
     if (SOME CONDITION TO DETERMIN SPECIAL DAY) { 
      return [true, 'specialDay']; 
     } 
    } 
    return [true, '']; 
} 

Answer 5

Oto fragment, który podświetli bieżącą datę lub datę z powiązanego pola tekstowego.

Styl:

.dateHighlight a { background: #58585a !important; } 

Skrypt:

var pickerDate; 
$("#pickerId").datepicker({ 
    // get the date to be highlighted; use today if no date 
    beforeShow: function() { 
     pickerDate = $("#pickerId").datepicker("getDate"); 
     if (pickerDate == null) pickerDate = new Date((new Date()).setHours(0, 0, 0, 0)); 
    }, 
    // add css class to the date 
    beforeShowDay: function(date) { 
     if (date.getTime() == pickerDate.getTime()) { 
      return [true, 'dateHighlight', ''] 
     } 
     return [true] 
    } 
}); 

Answer 6

Jeśli kalendarz ui ma tematu, należy wyłączyć background-image atrybutu specialDate:

.specialDate a { 
    background-image: none !important; 
    background: #33CC66 !important; 
} 

Answer 7

Używanie po kliknięciu możesz zrobić wszystkie potrzebne css:

var checkin = $('.dpd1').datepicker() 
.on('click', function (ev) { 
     $('.datepicker').css("z-index", "999999999"); 
}).data('datepicker');