当我在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;
}