如何在单击按钮时从jquery日历中清除突出显示的日期

Question

我在jquery日历中突出显示了一些日期。现在我想清除(取消突出显示)单击按钮时的日期。

$("#datepicker").datepicker({
beforeShowDay: function(date) {
// check if date is in your array of dates
console.log(datesdata);
var selecteddates = datesdata[date];
if (selecteddates) {
// if it is return the following.
return [true, 'event', 'Tooltip text'];
} else {
// default
return [true, '', ''];
}
}
});
$("#clear").click(function() {
alert();
$('#datepicker').removeClass('event');
});

Answer 1

您正在尝试从#datepicker中删除类event。但是datepicker插件不会将该类应用于input，而是将其添加到由datepicker生成的DOM的特定td中。

你需要的是重新渲染以前生成的 DOM(可能还有其他黑客，但这应该是这样做的标准方法)。代码：

$("#datepicker").datepicker("refresh");

现在，诀窍是在调用上述refresh选项之前更新datepicker的"输入/选项"。

一种方法是有一个标志，比如"突出显示"，当true时应该添加类，反之false亦然。

$("#clear").click(function() {
// set flag to false on clear 
highlight = false;
// re-init the datepicker
$("#datepicker").datepicker("refresh");
});

下面是一个演示：

(我对datesdata做了一些假设，您没有提供，强烈建议您对SO中的任何问题这样做)

$(function() {
// array of date objects, should highlight dates 5, 10 and 15 Dec
var datesdata = [new Date("December 5, 2017 00:00:00"),
new Date("December 10, 2017 00:00:00"),
new Date("December 15, 2017 00:00:00"),
new Date("December 20, 2017 00:00:00")
];
// flag set to true by default
var highlight = true;
$("#datepicker").datepicker({
beforeShowDay: function(date) {
// convert date to time in milliseconds for comparison
var datesdata_Time = datesdata.map(function(d) {
return d.getTime();
});
if (highlight && datesdata_Time.indexOf(date.getTime()) > -1) {
// if it is return the following.
return [true, 'event', 'Tooltip text'];
} else {
// default
return [true, '', ''];
}
}
});
$("#clear").click(function() {
// set flag to false on clear 
highlight = false;
// re-init the datepicker
$("#datepicker").datepicker("refresh");
});
//additional
$("#toggle").click(function() {
highlight = !highlight;
$("#datepicker").datepicker("refresh");
});
});

.event {
background: yellow;
border: 2px solid #f00 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />

<input id="datepicker" type="text" />
<input id="clear" type="button" value="clear" />
<input id="toggle" type="button" value="toggle" />