Jqueryui datepicker 更改 class onselect 不起作用

Question

我尝试更改所选日期选择器字段的 class，但它不起作用。

在这里你可以找到一个带有代码的fiddle https://jsfiddle.net/ztj6rd5m/

<div id="Kalender"></div>

/* <![CDATA[ */
$(document).ready(function() {
  $("#Kalender").datepicker({
    numberOfMonths: 1,
    showButtonPanel: true,
    dateFormat: "yy-mm-dd",
    onSelect: function(date, inst) {
      $(".ui-datepicker-calendar .ui-datepicker-current-day")
        .removeClass("ui-datepicker-current-day")
        .children()
        .removeClass("ui-state-active");

      $(".ui-datepicker-calendar TBODY A").each(function() {
        if ($(this).text() == inst.selectedDay) {
                    $(this).parent().addClass("pickerActive");
          return;
        }
      });
    }
  });
});
/* ]]> */

.pickerActive {
  background: yellow;
}

我尝试了不同的情况，但 addClass 没有触发。任何人都可以掌舵我吗？谢谢！

Answer 1

好的。最后，正如承诺的那样，我找到了解决方案。检查 fiddle here.

正如我在评论中提到的那样，日期选择器会在某个时候自行重构，这就是您的代码不起作用的原因。您可以使用超时功能来应用您的代码。

$(document).ready(function() {
  $("#Kalender").datepicker({
    numberOfMonths: 1,
    showButtonPanel: true,
    dateFormat: "yy-mm-dd",
    onSelect: function(date, inst) {
      $(".ui-datepicker-calendar .ui-datepicker-current-day")
        .removeClass("ui-datepicker-current-day")
        .children()
        .removeClass("ui-state-active");
      setTimeout(function() {
        inst.dpDiv.find('.ui-datepicker-current-day a').addClass("pickerActive");
      }, 50);
      return;
    }
  });
});

我稍微修改了你的代码。我删除了以下条件检查代码

$(".ui-datepicker-calendar TBODY A").each(function() {
        if ($(this).text() == inst.selectedDay) {

到 inst.dpDiv.find('.ui-datepicker-current-day') 因为您从 onSelect 函数参数中获取了选定的日期实例。

在您的 css 中，您必须将 !important 添加到背景颜色，因为 Datepicker Ui 的背景颜色会覆盖您的样式。

Jqueryui datepicker 更改 class onselect 不起作用

Jqueryui datepicker change class onselect doesn´t work

jquery-ui