javascript 在 Jquery UI Datepicker 中突出显示特定日期
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10173440/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highlight specific dates in Jquery UI Datepicker
提问by Spoeken
I've read the other questions like this here, but none does exactly what I want.
我在这里阅读了其他类似的问题，但没有一个完全符合我的要求。
I want to add a class to all the days between two dates. The dates will be set in variables.
我想为两个日期之间的所有日子添加一个课程。日期将在变量中设置。
Any thoughts?
有什么想法吗？
回答by Salman A
You need to implement the beforeShowDay event for the datepicker:
您需要为datepicker实现beforeShowDay 事件：
The function takes a date as a parameter and must return an array with [0] equal to true/false indicating whether or not this date is selectable, [1] equal to a CSS class name(s) or '' for the default presentation, and [2] an optional popup tooltip for this date. It is called for each day in the datepicker before it is displayed.
该函数将日期作为参数，并且必须返回一个数组，其中 [0] 等于 true/false 指示此日期是否可选，[1] 等于 CSS 类名或默认表示的 '' , 和 [2] 此日期的可选弹出工具提示。在日期选择器中的每一天显示之前都会调用它。
So you need to do something like:
因此，您需要执行以下操作：
$("#datepicker").datepicker({
beforeShowDay: function(d) {
var a = new Date(2012, 3, 10); // April 10, 2012
var b = new Date(2012, 3, 20); // April 20, 2012
return [true, a <= d && d <= b ? "my-class" : ""];
}
});
Demo:
演示：
$(function() {
$("#datepicker").datepicker({
beforeShowDay: function(d) {
// a and b are set to today ± 5 days for demonstration
var a = new Date();
var b = new Date();
a.setDate(a.getDate() - 5);
b.setDate(b.getDate() + 5);
return [true, a <= d && d <= b ? "my-class" : ""];
}
});
});@import url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/blitzer/jquery-ui.min.css");
.my-class a {
background: #FC0 !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<input id="datepicker">