Hinzufügen von benutzerdefinierten Klassennamen zu JQuery Kalenderzelle

Question

Ich benutze Jquery Kalender. Ich versuche, einen neuen Klassennamen in jede Zelle des Kalenders einzufügen. Es wird hinzugefügt, aber es wird entfernt, wenn der Kalender angeklickt wird.

Im Grunde aktualisiert es den Kalender bei jedem Klick, damit die neu hinzugefügte Klasse beim Aktualisieren entfernt wird.

Wie behalte ich den Klassennamen?

hier ist mein Code

$(function() { 
    $('#custom-date-format').multiDatesPicker({ 
    dateFormat: "y-m-d" 
    }); 
    $('.ui-state-default').addClass("calendar_bg"); 
}); 

Demo

Answer 1

Verwenden Callback-Funktionen von Datepicker Widget

$('#DatePicker').datepicker({ 
     //The calendar is recreated OnSelect for inline calendar 
     onSelect: function (date, dp) { 
      updateDatePickerCells(); 
     }, 
     onChangeMonthYear: function(month, year, dp) { 
      updateDatePickerCells(); 
     }, 
     beforeShow: function(elem, dp) { //This is for non-inline datepicker 
      updateDatePickerCells(); 
     } 
    }); 

    updateDatePickerCells(); 

    function updateDatePickerCells(dp) { 
     /* Wait until current callstack is finished so the datepicker 
      is fully rendered before attempting to modify contents */ 
     setTimeout(function() { 
      $('.ui-datepicker td > *').each(function (idx, elem) { 
       $(this).addClass("calendar_bg"); 
      }); 
     }, 0); 
    } 

See Demo

Für multiDatesPicker()

$(function() { 
    $('#from-input').multiDatesPicker({ 
     beforeShow: function(elem, dp) { 
      updateDatePickerCells(); 
     } 
    }); 
}); 

Answer 2

Warum Sie nicht über die bestehende .ut-state-default Hintergrund-Farbe annehmen, anstatt für das Hinzufügen von neuen zu gehen außer Kraft zu setzen?

.ui-state-default{background: #ffeb3b !important} 

Answer 3

Es ist eine bekannte heikles Thema Kalender jQuery UI finden Sie diese Frage jQuery ui - datepicker prevent refresh onSelect

Auf jeden Fall ist das Update inst.inline = false; auf ausgewählten hinzuzufügen, wie diese

$('#custom-date-format').multiDatesPicker({ 
    dateFormat: "y-m-d",  
    onSelect: function(date, inst){ 
     inst.inline = false; 
     $('.ui-state-default').addClass("calendar_bg"); 
    }  
}); 

ein demo Siehe Anmerkung jedoch , dass es einen Fehler in multidatespicker.js auslöst. Es scheint ein Problem mit diesem Plugin zu geben.

Answer 4

Es wäre besser, den vorhandenen Klassennamen zu verwenden und seinen Standardstyling zu überschreiben.

Dieses Stil .ui-widget-content a.ui-state-default { background: #ffeb3b }

ist hier die gleichen demo