Which way to add text to jquery ui datepicker cell?

jquery-ui-datepicker

Solution

I came across this same scenario and thought I would post my solution for an inline datepicker but should work for a popup datepicker as well.

First of all, you cannot modify the contents of the table cells created by the datepicker plugin. Doing so will break its core functionality as it reads the cell content to generate the selected date string. So, the contents must be added using pure css.

Create your 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();

Create the method to insert the cell content

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

Add a method to create new CSS rules on the fly, while keeping track of ones already created.

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

And finally, some default css for the new cell content

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

This works for basic content, but if you want to get fancy with something like '$20.95' (contains CSS special characters), you could use an md5 hash of the content to create the `className` variable.

EDIT JSFiddle modified from @yuga's JSFiddle to include an MD5 hash of the unique class name for more complicated contents.

Problem

Original source

Related problems

• Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)
• How to get current active instance of jquery datepicker