[英]jquery datepicker multiple css classes
I am looking for a possibility to highlight different dates in jquery's datepicker with different CSS classes. 我正在寻找在jquery的datepicker中用不同的CSS类突出显示不同日期的可能性。
Simply, append .green
to 27-10-2013
, .yellow
to 02-11.2013
and .red
to 05-11-2013
. 简单地说,追加
.green
至27-10-2013
, .yellow
到02-11.2013
和.red
至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. 到目前为止,我找不到任何解决方案在JQuery的官方日期选择器中使用多个带有
beforeShowDay
CSS类。
Thank you for your suggestions. 谢谢你的建议。
This is using the answer found in the post: https://stackoverflow.com/a/6048648/1524085 这是使用帖子中的答案: https : //stackoverflow.com/a/6048648/1524085
I have modified it to fit the OP's needs. 我修改了它以满足OP的需求。
http://jsfiddle.net/sN9Xy/1/ http://jsfiddle.net/sN9Xy/1/
EDIT: http://jsfiddle.net/sN9Xy/2/ to show all colors in the same month. 编辑: http : //jsfiddle.net/sN9Xy/2/显示同月的所有颜色。
$(".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);
}
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. 将日期格式设置为
Select Wednesday, Oct 16, 2013
格式并在选择器中使用它。
working fiddle: http://jsfiddle.net/ZUZSH/1/ , got the idea from here http://forum.jquery.com/topic/datepicker-add-class 工作小提琴: http : //jsfiddle.net/ZUZSH/1/ ,从这里得到了这个想法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, ''];
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.