Question

我尝试更改所选Datepicker字段的类，但是ist不起作用。

在这里您发现了带有代码的小提琴 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

好的。最后，按照承诺，我找到了解决方案。检查小提琴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更改类onselect不起作用

1 个答案: