Question

当我点击jQuery-ui datepicker中的特定日期时，在该日期添加了ui-state-active类。我希望在点击该日期或onSelect日期事件时删除该类。

＆＃13;

  $( function() {
    $( "#datepicker" ).datepicker();
  });

＆＃13;

<!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>

＆＃13;

Answer 1

希望这有帮助

您可以删除beforeShowDay()上的课程。在beforeShowDay（）中，您可以使用ui-state-active轻松删除setTimeout function课程。

$("#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>

Answer 2

我建议从他们的网站下载JQueryUI（然后你可以选择你想要获得一个较小文件的插件）并编辑单行代码，将该类添加到选定的日期。搜索“datepicker”然后在该部分中查找“ui-state-active”。

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

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

如何在点击datepicker

2 个答案: