javascript - 使用 beforeShow() 在日期选择器中添加类

Question

我正在尝试使用此函数在所选日期元素上添加一个类:

beforeShow:function(){ $(".ui-datepicker-current-day").addClass('testX') }

我有两个问题。首先，没有添加这样的类。其次，日志显示了一个奇怪的行为。前两次我打开 datePicker，hasClass() 返回 false，但第三次显示 true(而 testX 类仍未显示在 html 中)。

 $(function() {
  $( "#datepicker" ).datepicker({
    beforeShow:function(){     
      console.log('================================================');
      console.log($( ".ui-datepicker-current-day" ).hasClass('testX'));
      $( ".ui-datepicker-current-day" ).addClass('testX');
      console.log($( ".ui-datepicker-current-day" ).hasClass('testX'));
    }
  });
});

.container {
  width: 600px;
  padding: 20px;
  margin: auto;
  background: #ddd;
}
.testX{
  background-color:red;
}

<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>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="//code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div class="container">
  <p>This is a datepicker example using jquery, jquery ui, and jquery css</p>
<form>
Date:
<input id="datepicker">
</form>
</div>

Answer 1

$("#datepicker").datepicker({
            afterShow: function () {
                console.log('================================================');
                console.log($(".ui-datepicker-current-day").hasClass('testX'));
                $(".ui-datepicker-current-day").addClass('testX');
                console.log($(".ui-datepicker-current-day").hasClass('testX'));
            }
        });

上面的代码已经更新，您可以在#datetimepicker 上使用 onfous 事件。下面给出的代码可能对你有帮助。它对我有用。

  $(function () {

       $("#datepicker").focus(function(){
              console.log('================================================');
                console.log($(".ui-datepicker-current-day").hasClass('testX'));
                $(".ui-datepicker-current-day").addClass('testX');
                console.log($(".ui-datepicker-current-day").hasClass('testX'));

         });

    });