CODEWITHSUNDEEP
javascriptjquerycssdatepickerjquery-ui-datepicker
Thommy
Thommy

Reputation: 59

jquery datepicker multiple css classes

I am looking for a possibility to highlight different dates in jquery's datepicker with different CSS classes.

Simply, append .green to 27-10-2013, .yellow to 02-11.2013 and .red to 05-11-2013. So far, I could not find any solution to use more than one CSS Class with beforeShowDay in JQuery's official datepicker.

Thank you for your suggestions.

Upvotes: 0

Views: 1845

Answers (3)

Daniel Ward
Daniel Ward

Reputation: 165

working fiddle: http://jsfiddle.net/ZUZSH/1/ , got the idea from here http://forum.jquery.com/topic/datepicker-add-class

var redDays = [[10, 19, 2013],[10, 21, 2013]];
var greenDays = [[10,20, 2013],[10, 22, 2013]];
$("#cal").datepicker({ beforeShowDay: myDays})
function myDays(date) {
for (i = 0; i < redDays.length; i++) {
if (date.getMonth() == redDays[i][0] - 1
&& date.getDate() == redDays[i][1]
&& date.getFullYear() == redDays[i][2]) {
return [true, 'red' ];
}
}

for (i = 0; i < greenDays.length; i++) {
if (date.getMonth() == greenDays[i][0] - 1
&& date.getDate() == greenDays[i][1]
&& date.getFullYear() == greenDays[i][2]) {
return [true, 'green' ];
}
}
return [true, ''];    
}

Upvotes: 0

Pedro Estrada
Pedro Estrada

Reputation: 2404

This is using the answer found in the post: https://stackoverflow.com/a/6048648/1524085

I have modified it to fit the OP's needs.

http://jsfiddle.net/sN9Xy/1/

EDIT: http://jsfiddle.net/sN9Xy/2/ to show all colors in the same month.

$(".date").datepicker({
    beforeShowDay: SetDayStyle
});

var cssDates = [
                ["10/27/2013", "green"], 
                ["2/11/2013", "yellow"], 
                ["5/11/2013", "red"]
               ];

function SetDayStyle(date) {
    var enabled = true;
    var cssClass = "";
    var toolTip = "";

    var day = date.getDate();
    var month = date.getMonth() + 1; //0 - 11
    var year = date.getFullYear();
    var compare = month + "/" + day + "/" + year;

    for (var i = 0; i < cssDates.length; i++) {
        //var toolTip = cssDates[i].indexOf(compare) + " " + compare
        if (cssDates[i].indexOf(compare) >= 0) cssClass = cssDates[i][1];
    }

    return new Array(enabled, cssClass, toolTip);
}

Upvotes: 2

sabithpocker
sabithpocker

Reputation: 15558

Keith Wood's datepick.

$('a[title="Select Wednesday, Oct 16, 2013"]').addClass("red");

Format your dates to Select Wednesday, Oct 16, 2013 format and use it in the selector.

Upvotes: 0

Related Questions