Question

By default, the jQuery UI datepicker resets the calendar HTML whenever a date is picked. I want to be able to change/add elements of the calendar (add images, backgrounds, etc) and have them stay after a date is clicked.

For example, this script starts as an inline date picker with the background of the 24th blue. When you click another date (say the 15th), the HTML resets and the blue background disappears. I want it to STAY blue after a date is clicked.

<script>

$(function(){
    $('#cal').datepicker({
        onSelect: function(dateText, inst) {
            console.log(dateText);
            // dont do anything else
        }
    });
    $('.ui-state-default:contains(24)').css('background-color','blue');
});

</script>   

<div id='cal'></div>

Demo: http://jsfiddle.net/DtvZM/

See how when you click a day, the 24th turns from blue to white.. I want it to STAY blue.

Note: This is just an example to demonstrate the problem, and not my actual code.

I’m looking to see if there is an easy solution to this before modifying the jQuery UI widget code.

Answer 1

I’ve resolved that this isn’t possible without modifying the UI datepicker code, which is what I ended up doing –

In the _selectDate method, I changed the line:

if (inst.inline)
    this._updateDatepicker(inst);

to

if (inst.inline) {
    inst.stay = true;
    this._updateDatepicker(inst);
    inst.stay = false;
}

Then in _updateDatepicker method, I changed

inst.dpDiv.empty().append(this._generateHTML(inst));

to

if (!inst.stay) {
    inst.dpDiv.empty().append(this._generateHTML(inst));
}

Now UI will not reset the calendar HTML when a date is selected.