CODEWITHSUNDEEP
javascriptjqueryjquery-uidatepicker
séan35
séan35

Reputation: 1042

How to highlight some specific days with multiple colors in JQuery Datepick

I use jQuery plugin (Datepick) that formed the basis for the jQuery UI Datepicker. It is made available as a separate plugin because the jQuery UI version desired simplified functionality (http://keith-wood.name/datepick.html). I use this plugin for multiple date selection feature that jquery datepicker does not have

I would like to highlight days with multiple colors and disable some specific days.

For example;

array1 = {8/5/2013, 8/14/2013, 8/21/2013} - Background Blue
array2 = {8/15/2013, 8/22/2013} - Background Red 
array3 = {8/9/2013, 8/13/2013} - Disable

I do not think that this configuration is not the same with jquery datepicker. How to do this?

All feedbacks appreciated!

EDIT:

I can see alert messages that means "onDate" feature is working. However, there is nothing changed on calendar. I do not know that css tags are right. Also, "beforeShowDay" does not working, I tried. This feature may be blocked for some reasons.

css;

.Background-Blue .datepick-month a {
    background-color: #f00;
}
.Background-Red .datepick-month a {
    background-color: #0f0;
}

js;

$('.clndr').datepick({
        multiSelect: 999, 
        monthsToShow: [3,2],
        onDate: method1});

function method1(date){

    if($.inArray($.datepicker.formatDate('yy-mm-dd', date ), array1) > -1)
    {
        //alert("hf1");
        return [true,"Background-Blue"];
    }
    else if($.inArray($.datepicker.formatDate('yy-mm-dd', date ), array2) > -1)
    {
        //alert("hf2");
        return [true,"Background-Red"];
    }
    else if($.inArray($.datepicker.formatDate('yy-mm-dd', date ), array3) > -1)
    {
        //alert("hf3");
        return [false,"Disable"];
    }
   else{
       //alert("hf4");
        return[true];
    }

}

Upvotes: 1

Views: 5528

Answers (2)

Gajotres
Gajotres

Reputation: 57309

Working example: http://jsfiddle.net/Gajotres/xJ8je/

Note:

I have use 3rd party Date object extension to easily convert date format to your provided values. You can use any other similar implementation.

This code will work on DatePick plugin 4.00 and above, basically this was the point when plugin author made a large shift from Datepicker.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
    </head>
    <body>     
        <input id="datepicker" type="text" data-datepick="rangeSelect: false'"/>
    </body>
</html>

JavaScript:

$(document).ready(function() {
    //alert(new Date().format("m/d/Y"));
    array1 = ["6/5/2014", "6/14/2014", "6/21/2014"];
    array2 = ["6/15/2014", "6/22/2014"];
    array3 = ["6/9/2014", "6/13/2014"];

    $('#datepicker').datepick({
        onDate: function(date, current) { 
            console.log(date.format("m/d/Y"));
            if($.inArray(date.format("m/d/Y") , array1) > -1) {
                return {content: date.getUTCDate(), dateClass: 'blue-highlight'};
            }
            else if($.inArray(date.format("m/d/Y"), array2) > -1) {              
                return {content: date.getUTCDate(), dateClass: 'red-highlight'};
            }
            else if($.inArray(date.format("m/d/Y"), array3) > -1) {
                return {content: date.getUTCDate(), selectable: false};
            } else {
                return {};
            }             
        }         
    });
});

/**************************************
 * Date class extension
 * 
 */
// Provide month names
Date.prototype.getMonthName = function(){
    var month_names = [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
        'July',
        'August',
        'September',
        'October',
        'November',
        'December'
    ];

    return month_names[this.getMonth()];
}

// Provide month abbreviation
Date.prototype.getMonthAbbr = function(){
    var month_abbrs = [
        'Jan',
        'Feb',
        'Mar',
        'Apr',
        'May',
        'Jun',
        'Jul',
        'Aug',
        'Sep',
        'Oct',
        'Nov',
        'Dec'
    ];

    return month_abbrs[this.getMonth()];
}

// Provide full day of week name
Date.prototype.getDayFull = function(){
    var days_full = [
        'Sunday',
        'Monday',
        'Tuesday',
        'Wednesday',
        'Thursday',
        'Friday',
        'Saturday'
    ];
    return days_full[this.getDay()];
};

// Provide full day of week name
Date.prototype.getDayAbbr = function(){
    var days_abbr = [
        'Sun',
        'Mon',
        'Tue',
        'Wed',
        'Thur',
        'Fri',
        'Sat'
    ];
    return days_abbr[this.getDay()];
};

// Provide the day of year 1-365
Date.prototype.getDayOfYear = function() {
    var onejan = new Date(this.getFullYear(),0,1);
    return Math.ceil((this - onejan) / 86400000);
};

// Provide the day suffix (st,nd,rd,th)
Date.prototype.getDaySuffix = function() {
    var d = this.getDate();
    var sfx = ["th","st","nd","rd"];
    var val = d%100;

    return (sfx[(val-20)%10] || sfx[val] || sfx[0]);
};

// Provide Week of Year
Date.prototype.getWeekOfYear = function() {
    var onejan = new Date(this.getFullYear(),0,1);
    return Math.ceil((((this - onejan) / 86400000) + onejan.getDay()+1)/7);
} 

// Provide if it is a leap year or not
Date.prototype.isLeapYear = function(){
    var yr = this.getFullYear();

    if ((parseInt(yr)%4) == 0){
        if (parseInt(yr)%100 == 0){
            if (parseInt(yr)%400 != 0){
                return false;
            }
            if (parseInt(yr)%400 == 0){
                return true;
            }
        }
        if (parseInt(yr)%100 != 0){
            return true;
        }
    }
    if ((parseInt(yr)%4) != 0){
        return false;
    } 
};

// Provide Number of Days in a given month
Date.prototype.getMonthDayCount = function() {
    var month_day_counts = [
        31,
        this.isLeapYear() ? 29 : 28,
        31,
        30,
        31,
        30,
        31,
        31,
        30,
        31,
        30,
        31
    ];

    return month_day_counts[this.getMonth()];
} 

// format provided date into this.format format
Date.prototype.format = function(dateFormat){
    // break apart format string into array of characters
    dateFormat = dateFormat.split("");

    var date = this.getDate(),
        month = this.getMonth(),
        hours = this.getHours(),
        minutes = this.getMinutes(),
        seconds = this.getSeconds();
    // get all date properties ( based on PHP date object functionality )
    var date_props = {
        d: date < 10 ? date : date,
        D: this.getDayAbbr(),
        j: this.getDate(),
        l: this.getDayFull(),
        S: this.getDaySuffix(),
        w: this.getDay(),
        z: this.getDayOfYear(),
        W: this.getWeekOfYear(),
        F: this.getMonthName(),
        m: month < 10 ? (month+1) : month+1,
        M: this.getMonthAbbr(),
        n: month+1,
        t: this.getMonthDayCount(),
        L: this.isLeapYear() ? '1' : '0',
        Y: this.getFullYear(),
        y: this.getFullYear()+''.substring(2,4),
        a: hours > 12 ? 'pm' : 'am',
        A: hours > 12 ? 'PM' : 'AM',
        g: hours % 12 > 0 ? hours % 12 : 12,
        G: hours > 0 ? hours : "12",
        h: hours % 12 > 0 ? hours % 12 : 12,
        H: hours,
        i: minutes < 10 ? '0' + minutes : minutes,
        s: seconds < 10 ? '0' + seconds : seconds           
    };

    // loop through format array of characters and add matching data else add the format character (:,/, etc.)
    var date_string = "";
    for(var i=0;i<dateFormat.length;i++){
        var f = dateFormat[i];
        if(f.match(/[a-zA-Z]/g)){
            date_string += date_props[f] ? date_props[f] : '';
        } else {
            date_string += f;
        }
    }

    return date_string;
};
/*
 *
 * END - Date class extension
 * 
 ************************************/

CSS:

.blue-highlight {
    background-color: #0C91FF !important;
    color: white !important;
}

.blue-highlight:hover {
    background-color: #0A70FF !important;
}

.red-highlight {
    background-color: #FF3205 !important;
    color: white !important;    
}

.red-highlight:hover {
    background-color: #FF0800 !important;  
}

Upvotes: 1

Jain
Jain

Reputation: 1249

Try this in datepicker js

beforeShowDay: function(date){

                if($.inArray($.datepicker.formatDate('yy-mm-dd', date ), array1) > -1)
                {
                    return [true,"Background-Blue"];
                }
                else if($.inArray(date.getDay(), array2) > -1)
                {
                    return [true,"Background-Red"];
                }
                else if($.inArray(date.getDay(), array3) > -1)
                {
                    return [false,"Disable"];
                }
               else{
                    return[true];
                }
            },

Upvotes: 1

Related Questions