如何在单击日期选择器中的日期时删除 ui 状态活动类



当我在jQuery-ui日期选择器中单击特定日期时,会在该日期添加ui-state-active类。我想在单击该日期或选择该日期的事件时删除该类。

$( function() {
$( "#datepicker" ).datepicker();
});
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https:////code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>


</body>
</html>

希望这有帮助

您可以在 beforeShowDay(( 上删除类。在 beforeShowDay(( 中,您可以使用setTimeout function轻松删除ui-state-active类。

$("#datepicker").datepicker({
beforeShowDay: function (date) {
setTimeout(function () {
$("#ui-datepicker-div").find(".ui-state-active").removeClass("ui-state-active");
},100);
return [true, '', ''];
}
});

$(function() {
$("#datepicker").datepicker({
beforeShowDay: function (date) {
setTimeout(function () {
$("#ui-datepicker-div").find(".ui-state-active").removeClass("ui-state-active");
},100);
return [true, '', ''];
}
});
});
<!doctype html>
<html lang="en">
<head>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>


</body>
</html>

我建议从他们的网站下载 JQueryUI(然后您可以选择要获取较小文件的插件(并编辑将类添加到选定日期的单行代码。搜索"日期选择器",然后在该部分中查找"ui-state-active"。

或者另一种非常好的解决方案是在日期选择器中更改 .ui-state-active 的 CSS。

.ui-state-active, .ui-widget-content .ui-state-active {
border: 1px solid #c5c5c5;
background: #f6f6f6;
color: #454545;
}

最新更新