Javascript 如何在JQuery Datepick中使用多种颜色突出显示某些特定日期
我使用jQuery插件（Datepick），它构成了jQueryUIDatePicker的基础。它作为一个单独的插件提供，因为jQueryUI版本需要简化的功能（）。我将此插件用于jquery datepicker没有的多日期选择功能 我想用多种颜色突出显示几天，并禁用某些特定的几天 比如,Javascript 如何在JQuery Datepick中使用多种颜色突出显示某些特定日期,javascript,jquery,jquery-ui,datepicker,Javascript,Jquery,Jquery Ui,Datepicker,我使用jQuery插件（Datepick），它构成了jQueryUIDatePicker的基础。它作为一个单独的插件提供，因为jQueryUI版本需要简化的功能（）。我将此插件用于jquery datepicker没有的多日期选择功能 我想用多种颜色突出显示几天，并禁用某些特定的几天 比如, array1 = {8/5/2013, 8/14/2013, 8/21/2013} - Background Blue array2 = {8/15/2013, 8/22/2013} - Backgroun
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
在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];
}
},
我准备了一些代码并尝试了。但是，它不起作用。我在问题的编辑部分解释了我所做的事情。CSS代码可能是错误的，我不知道。这是因为这个语法在4.0.0版本中被放弃了。当我们点击这些相关日期时，有没有办法删除CSS类（蓝色突出显示或红色突出显示）？我不明白为什么没有，你应该打开另一个问题，你对上面链接上的问题不知道吗？我知道，但给我一点时间，我有自己的工作：）
$('.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];
}
}
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];
}
},
<!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>
$(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
*
************************************/
.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;
}