Question

我使用jQuery插件（Datepick）构成了jQuery UI Datepicker的基础。它作为单独的插件提供，因为jQuery UI版本需要简化的功能（http://keith-wood.name/datepick.html）。我将此插件用于jquery datepicker没有的多个日期选择功能

我想突出显示多种颜色的日子并禁用某些特定日期。

例如;

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

我认为这种配置与jquery datepicker不一样。怎么做？

所有反馈都赞赏！

修改

我可以看到警告消息，这意味着“onDate”功能正在运行。但是，日历上没有任何变化。我不知道css标签是对的。此外，“beforeShowDay”不起作用，我试过了。由于某些原因，此功能可能会被阻止。

的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];
    }

}

Answer 1

工作示例：http://jsfiddle.net/Gajotres/xJ8je/

注意：

我使用第三方日期对象扩展名轻松地将日期格式转换为您提供的值。您可以使用任何其他类似的实现。

此代码适用于DatePick插件4.00及更高版本，基本上这是插件作者从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;  
}

Answer 2

在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];
                }
            },

如何在JQuery Datepicker中突出显示多种颜色的特定日期

2 个答案:

注意：

HTML：

的JavaScript：

CSS：