在jquery UI日期选择器中突出显示日期
在jquery UI日期选择器中突出显示日期
提问于 2011-07-28 17:48:55
如何使用beforeShowDay在jQuery UI日期选择器中突出显示日期。我有以下日期数组
Array
(
[0] => 2011-07-07
[1] => 2011-07-08
[2] => 2011-07-09
[3] => 2011-07-10
[4] => 2011-07-11
[5] => 2011-07-12
[6] => 2011-07-13
)回答 7
Stack Overflow用户
回答已采纳
发布于 2011-07-28 19:25:32
我用以下方法解决了这个问题
var disabledDays = ["2011-7-21","2011-7-24","2011-7-27","2011-7-28"];
var date = new Date();
jQuery(document).ready(function() {
$( "#dateselector").datepicker({
dateFormat: 'yy-mm-dd',
beforeShowDay: function(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
for (i = 0; i < disabledDays.length; i++) {
if($.inArray(y + '-' + (m+1) + '-' + d,disabledDays) != -1) {
//return [false];
return [true, 'ui-state-active', ''];
}
}
return [true];
}
});
});Stack Overflow用户
发布于 2011-07-28 18:15:38
请看一下文档。
beforeShowDay该函数接受日期作为参数，并且必须返回一个等于true/false的数组，该数组表示该日期是否可选，1等于CSS类名称或'‘表示默认表示，2返回该日期的可选弹出工具提示。在显示它之前，每天都会在datepicker中调用它。
这意味着您需要创建一个函数，该函数将接受日期并返回一个参数数组，其中值为：
css
- boolean-指示date是否可以是selected
- string -将应用于date
- 字符串的类的名称-此date的可选弹出工具提示
下面是一个示例：
var your_dates = [new Date(2011, 7, 7),new Date(2011, 7, 8)]; // just some dates.
$('#whatever').datepicker({
beforeShowDay: function(date) {
// check if date is in your array of dates
if($.inArray(date, your_dates)) {
// if it is return the following.
return [true, 'css-class-to-highlight', 'tooltip text'];
} else {
// default
return [true, '', ''];
}
}
});现在，您可以添加样式以突出显示日期
<style>
.css-class-to-highlight{
background-color: #ff0;
}
</style>Stack Overflow用户
发布于 2016-02-01 00:38:02
发现投票最多的答案不起作用。对代码进行了一些更新，使其正常工作。$.inArray()主要搜索indexOf()。另外，我们不能直接比较两个日期是否相等。参考：Compare two dates with JavaScript
function inArrayDates(needle, haystack){
var found = 0;
for (var i=0, len=haystack.length;i<len;i++) {
if (haystack[i].getTime() == needle.getTime()) return i;
found++;
}
return -1;
}并将接受的函数更新为
if(inArrayDates(date, markDates) != -1) {
return [true, 'selected-highlight', 'tooltip here'];
} else {
return [true, '', ''];
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6857025
复制相关文章
相似问题
腾讯云开发者
