Which way to add text to jquery ui datepicker cell? -

Which way to add text to jquery ui datepicker cell? -

i need show custom text on dates @ jquery ui datepicker, more precise, render specific cost dates. thought utilize beforeshowday attach specific cost in titles of such dates , then, in beforeshow check out each td , place title's text cell. example:

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

this render prices on first calendar render (before month/year changed) , inline calendar only.

i need prices shown on not-inline calendar , on month/year alter well.

i tried other variants, , tried utilize onchangemonthyear, no success far.

thank attention, ideas welcome.

i came across same scenario , thought post solution inline datepicker should work popup datepicker well.

first of all, cannot modify contents of table cells created datepicker plugin. doing breaks core functionality reads cell content generate selected date string. so, contents must added using pure css.

create datepicker

class="lang-js prettyprint-override">$('#datepicker').datepicker({ changemonth: true, changeyear: true, mindate: 0, //the calendar recreated onselect inline calendar onselect: function (date, dp) { updatedatepickercells(); }, onchangemonthyear: function(month, year, dp) { updatedatepickercells(); }, beforeshow: function(elem, dp) { //this non-inline datepicker updatedatepickercells(); } }); updatedatepickercells();

create method insert cell content

class="lang-js prettyprint-override">function updatedatepickercells(dp) { /* wait until current callstack finished datepicker rendered before attempting modify contents */ settimeout(function () { //fill info want insert (i utilize , ajax request). key day of month //note* watch out css special characters in value var cellcontents = {1: '20', 15: '60', 28: '100'}; //select disabled days (span) proper indexing apply rule enabled days(a) $('.ui-datepicker td > *').each(function (idx, elem) { var value = cellcontents[idx + 1] || 0; /* dynamically create css rule add together contents :after selector don't break 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); }

add method create new css rules on fly, while keeping track of ones created.

class="lang-js prettyprint-override">var dynamiccssrules = []; function addcssrule(rule) { if ($.inarray(rule, dynamiccssrules) == -1) { $('head').append('<style>' + rule + '</style>'); dynamiccssrules.push(rule); } }

and finally, default css new cell content

class="lang-css prettyprint-override">.ui-datepicker td a:after { content: ""; display: block; text-align: center; color: blue; font-size: small; font-weight: bold; }

this works basic content, if want fancy '$20.95' (contains css special characters), utilize md5 hash of content create classname variable.

edit jsfiddle modified @yuga's jsfiddle include md5 hash of unique class name more complicated contents.

jquery-ui-datepicker