CODEWITHSUNDEEP
javascriptjqueryhtmldatepicker
pankaj agarwal
pankaj agarwal

Reputation: 179

add html in beforeShowDay of jquery date picker

We are trying to add html on jquery selected date. we know we can put color via "beforeShowDay" function, But we didn't find any reference by which we can add html on selected date.

For example we are trying to achieve this

enter image description here

For this wrote this code

$('#txtDate').datepicker({
    beforeShowDay: function(date) {
        var Highlight = SelectedDates[date];
        if (Highlight) {
            return [true, "Highlighted", Highlight];
        }
        else {
            return [true, '', ''];
        }
    }
});

Fiddle

can any one help us in this? Any type of help is appreciated.

Upvotes: 2

Views: 420

Answers (1)

Mikhail
Mikhail

Reputation: 11

First add event afterShow:

$(function(){
    $.datepicker._updateDatepicker_original = $.datepicker._updateDatepicker;
    $.datepicker._updateDatepicker = function(inst) {
        $.datepicker._updateDatepicker_original(inst);
        var afterShow = this._get(inst, 'afterShow');
        if (afterShow)
            afterShow.apply((inst.input ? inst.input[0] : null));  // trigger custom callback
    }
})

Then add classes on beforeShowDay:

beforeShowDay: function(date) {
    var highlight = eventDates[date];
    if(highlight){
        return [true, 'someClass someClass someClass', ''];
    }else{
        return [true, '', ''];
    }

 },

Now you can modify html of date on afterShow event using someClass.

Upvotes: 1

Related Questions