Welchen Weg, um Text zu jquery ui datepicker Zelle hinzuzufügen?

Question

Ich brauche zeigen benutzerdefinierten Text an einigen Daten bei Jquery UI Datepicker, um genauer zu sein, um einen bestimmten Preis für einige Daten zu machen. Meine Idee war, vorShowDay zu verwenden, um einen bestimmten Preis in den Titeln solcher Daten anzuhängen und dann, in vorShow, jeden td auszuchecken und Titeltext in die Zelle zu setzen. Beispiel:

var m, d, y, checkDate, specificPrice = '';  
var specificPrices = {"2013-3-8":"300 EUR", "2013-2-26":"263 EUR"} 

$('#my-datepicker').datepicker({ 
    beforeShowDay:  function checkAvailable(date) { 
    m = date.getMonth(); 
    d = date.getDate(); 
    y = date.getFullYear(); 
    checkDate = y + '-' + (m+1) + '-' + d; 
    if(specificPrices[checkDate]){ 
     specificPrice = specificPrices[checkDate]; 
    }else{ 
     specificPrice = ''; 
    } 
    return [true, "", specificPrice]; 
}, 
    beforeShow: function(elem, inst){ 
     $('table.ui-datepicker-calendar tbody td', inst.dpDiv).each(function(){ 
      var calendarPrice = $(this).attr('title'); 
      if(calendarPrice != undefined){ 
       $(this).find('a').append('<span class="calendar-price">' + calendarPrice + '<span>'); 
      } 
     });   
    } 
}); 

Dies macht die Preise auf dem ersten Kalender machen (vor Monat/Jahr geändert werden) und für den Inline-Kalender nur.

Ich brauche Preise auf Nicht-Inline-Kalender und auf jeden Monat/Jahr Änderung angezeigt werden.

Ich habe einige andere Varianten versucht und versucht, onChangeMonthYear zu verwenden, aber bisher ohne Erfolg.

Vielen Dank für die Aufmerksamkeit, Ihre Ideen sind willkommen.

Answer 1

Ich stieß auf das gleiche Szenario und dachte, ich würde meine Lösung für einen Inline-Datapicker posten, sollte aber auch für einen Popup-Datapicker arbeiten.

Zunächst können Sie den Inhalt der vom datepicker-Plugin erstellten Tabellenzellen nicht ändern. Dadurch wird die Kernfunktionalität beim Lesen des Zelleninhalts unterbrochen, um die ausgewählte Datumszeichenfolge zu generieren. Also muss der Inhalt mit reinem CSS hinzugefügt werden.

Erstellen Sie Ihre picker

$('#DatePicker').datepicker({ 
    changeMonth: true, 
    changeYear: true, 
    minDate: 0, 
    //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(); 

die Methode Erstellen Sie den Zellinhalt

function updateDatePickerCells(dp) { 
    /* Wait until current callstack is finished so the datepicker 
     is fully rendered before attempting to modify contents */ 
    setTimeout(function() { 
     //Fill this with the data you want to insert (I use and AJAX request). Key is day of month 
     //NOTE* watch out for CSS special characters in the value 
     var cellContents = {1: '20', 15: '60', 28: '100'}; 

     //Select disabled days (span) for proper indexing but apply the rule only to enabled days(a) 
     $('.ui-datepicker td > *').each(function (idx, elem) { 
      var value = cellContents[idx + 1] || 0; 

      /* dynamically create a css rule to add the contents with the :after       
       selector so we don't break the datepicker functionality */ 
      var className = 'datepicker-content-' + value; 

      if(value == 0) 
       addCSSRule('.ui-datepicker td a.' + className + ':after {content: "\\a0";}'); //  
      else 
       addCSSRule('.ui-datepicker td a.' + className + ':after {content: "' + value + '";}'); 

      $(this).addClass(className); 
     }); 
    }, 0); 
} 

Fügen Sie eine Methode zum Erstellen neuer CSS-Regeln on the fly einzufügen, während der Einsen die Verfolgung bereits erstellt.

var dynamicCSSRules = []; 
function addCSSRule(rule) { 
    if ($.inArray(rule, dynamicCSSRules) == -1) { 
     $('head').append('<style>' + rule + '</style>'); 
     dynamicCSSRules.push(rule); 
    } 
} 

Und schließlich einige Standard-CSS für das neue Zellinhalt

.ui-datepicker td a:after 
{ 
    content: ""; 
    display: block; 
    text-align: center; 
    color: Blue; 
    font-size: small; 
    font-weight: bold; 
} 

Dies funktioniert für die grundlegenden Inhalte, aber wenn man mit so etwas wie ‚$ 20.95‘ Lust bekommen möchten (enthält CSS Sonderzeichen) , könnten Sie einen MD5-Hash des Inhalts verwenden, um die Variable className zu erstellen.

EDIT JSFiddle geändert von @ Yuga der JSFiddle für kompliziertere Inhalte einen MD5-Hash-Wert des eindeutigen Klassennamen enthalten.

Answer 2

Basierend auf @ PrestonS Antwort und this post, habe ich eine nette einfache Lösung, die <style> Tags zu Header nicht hinzufügen müssen.

Meine Lösung aktualisiert Preston als solche:

Modified updateDatePickerCells Funktion:

function updateDatePickerCells(dp) { 
    /* Wait until current callstack is finished so the datepicker 
     is fully rendered before attempting to modify contents */ 
    setTimeout(function() { 
     //Fill this with the data you want to insert (I use and AJAX request). Key is day of month 
     //NOTE* watch out for CSS special characters in the value 
     var cellContents = {1: '20', 15: '60', 28: '100'}; 

     //Select disabled days (span) for proper indexing but apply the rule only to enabled days(a) 
     $('.ui-datepicker td > *').each(function (idx, elem) { 
      var value = cellContents[idx + 1] || 0; 

      /***** MAGIC! *****/ 

      $(this).attr('data-content', value); 

      // and that's it! (oh, so easy) 
     }); 
    }, 0); 
} 

Mit dieser Lösung Sie brauchen nicht die addCSSRule Funktion überhaupt.

Modified css:

/* to target all date cells */ 
.ui-datepicker td > *:after { 
    content: attr(data-content); /***** MAGIC! *****/ 

    /* add your other styles here */ 
} 

/* to target only allowed date cells */ 
.ui-datepicker td > a:after { 
} 

/* to target only disabled date cells */ 
.ui-datepicker td > span:after { 
} 

Initialisierung mit dem Datepicker Objekt

Wenn Sie das Datepicker-Objekt in der updateDatePickerCells Funktion benötigen, ist hier eine Möglichkeit, es bei der Initialisierung zu bekommen. (Basierend auf this post)

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

var datepicker = $.datepicker._getInst(calendarElem[0]); 
updateDatePickerCells(datepicker);