How To Highlight Some Specific Days With Multiple Colors In Jquery Datepick

January 13, 2024 Post a Comment

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 functi

Solution 1:

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.

Baca Juga

HTML:

<!DOCTYPE html><html><head><title>Demo</title><metahttp-equiv='Content-Type'content='text/html; charset=utf-8'/><metaname="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><inputid="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'};
            }
            elseif($.inArray(date.format("m/d/Y"), array2) > -1) {              
                return {content: date.getUTCDate(), dateClass: 'red-highlight'};
            }
            elseif($.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"];
    varval = 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){
                returnfalse;
            }
            if (parseInt(yr)%400 == 0){
                returntrue;
            }
        }
        if (parseInt(yr)%100 != 0){
            returntrue;
        }
    }
    if ((parseInt(yr)%4) != 0){
        returnfalse;
    } 
};

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

Solution 2:

Try this in datepicker js

beforeShowDay: function(date){

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

javascript dox