Który sposób dodać tekst do komórki jquery ui datepicker?

Question

Potrzebuję, aby pokazać niestandardowy tekst w niektórych datach w Datepicker Jquery UI datatkera, aby dokładniej podać konkretną cenę dla niektórych dat. Mój pomysł polegał na tym, że użyłem przed ShowDay do dołączenia konkretnej ceny w tytułach takich dat, a następnie, przedtem, aby sprawdzić każdy td i umieścić tekst tytułu w komórce. Przykład:

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

Spowoduje to renderowanie cen w renderowaniu pierwszego kalendarza (przed zmianą miesiąca/roku) i tylko w kalendarzu wbudowanym.

Potrzebuję ceny, które mają być wyświetlane w kalendarzu nielinearnym oraz w każdej zmianie miesiąca/roku.

Próbowałem innych wariantów i próbowałem użyć naChangeMonthYear, ale bez powodzenia.

Dziękuję za uwagę, Twoje pomysły są mile widziane.

Answer 1

Natknęłam się na ten sam scenariusz i pomyślałam, że mogę opublikować moje rozwiązanie dla wbudowanego datepika, ale powinien również działać dla popup-datepika.

Po pierwsze, nie można modyfikować zawartości komórek tabeli utworzonych przez wtyczkę datepicker. Spowoduje to przerwanie podstawowej funkcji, ponieważ odczytuje zawartość komórki, aby wygenerować wybrany ciąg daty. Tak więc zawartość musi być dodana za pomocą czystego css.

Utwórz datepicker

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

Tworzenie metody wstawić zawartość komórek

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

Dodaj metodę tworzenia nowych reguł CSS w locie, podczas gdy śledzenie tych już powstałych.

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

I wreszcie, niektóre domyślne css dla nowej zawartości komórek

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

To działa na podstawowe treści, ale jeśli chcesz uzyskać fantazyjny coś jak „$ 20.95” (zawiera CSS znaków specjalnych) , możesz użyć skrótu md5 zawartości, aby utworzyć zmienną className.

EDIT JSFiddle modyfikowany użytkownika @ yudze JSFiddle celu włączenia hash MD5 unikalnej nazwy klasy dla bardziej skomplikowanych treści.

Answer 2

Na podstawie odpowiedzi @ PrestonS i this post, mam ładne proste rozwiązanie, które nie musi dodawać tagów <style> do nagłówka.

Moje rozwiązanie aktualizuje Prestona jako takie:

Modified updateDatePickerCells funkcję:

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

Dzięki takiemu rozwiązaniu nie trzeba funkcję addCSSRule w ogóle.

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

Inicjowanie z obiektem datepicker

Jeśli potrzebujesz obiekt datepicker w funkcji updateDatePickerCells, tutaj jest sposób, aby dostać go w czasie inicjalizacji. (Na podstawie 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);