JQuery UI datepicker onChangeMonthYear 获取 td答案

【问题标题】：JQuery UI datepicker onChangeMonthYear get td'sJQuery UI datepicker onChangeMonthYear 获取 td
【发布时间】：2021-06-08 03:17:24
【问题描述】：

我正在使用 JQuery UI 的日期选择器在日期旁边显示附加文本。我这样做的方式是选择正在显示的月份的所有 td 并循环遍历它们以将文本附加到所需的日期。所以当日期选择器刚刚加载时，这工作得很好。

当我更改月份时出现问题；我正在使用onChangeMonthYear 为新选择的月份在 td 上循环，但问题是我在onChangeMonthYear 中获得的 td 是在选择新月份之前的上个月。例如，如果选择了 3 月，而我更改为 4 月，onChangeMonthYear 将给我 3 月的 td。现在如果我回到三月，onChangeMonthYear 会给我四月的 td。

这是我在 onChangeMonthYear 中获取 td 的代码

onChangeMonthYear: (year, month, widget) => {
    // the following line of code works just fine outside of this function
    let tds = widget.dpDiv.find(".ui-datepicker-calendar td");                   
},

图书馆有什么问题还是我做错了什么？

现在我注意到一件奇怪的事情：

onChangeMonthYear: (year, month, widget) => {
    // When I expand the contents of the following dpDiv in the browser, 
    // I get the correct td's!!
    console.log(widget.dpDiv);
    // BUT when I expand the content of the following children, 
    // I still get the td's of the previous month, how is that even possible?!?
    console.log(widget.dpDiv.children());               
},

这里有一个fiddle 来演示这个问题。

更新

我设法找到了solution

【问题讨论】：

能不能给个样例功能，帮到你会更方便
another thing widget.dpDiv.children() 只选择第一级children，tds包含在带有tagname table的children中
@Frenchy 我用 jsfiddle 更新了帖子
你试过我的解决方案了吗？
@Frenchy 抱歉回复晚了。我设法找到了solution

标签： jquery jquery-ui

【解决方案1】：

当您选择td 时，td's 不会更新，这是您的值较旧的原因，我没有看到有关此的事件，所以我建议您等待 tds 的值通过测试月份来更改，您如果需要可以添加年份：

   onChangeMonthYear: (year, month, widget) => {
      var timer = setInterval(function() {
        let $m = widget.dpDiv.find(".ui-datepicker-calendar td[data-month]");
        if (parseInt($m.first().data("month"), 10) + 1 == month) {
          console.log("clear");
          clearInterval(timer);
          addCustInfoCalendar(datePriceObj, $m);
        }

      }, 100);
    },

$(document).ready(function() {

  let datePriceObj = {
    "3/28/2021": 300,
    "3/29/2021": 200,
    "3/30/2021": 300,
    "3/31/2021": 400,
    "4/1/2021": 300,
    "4/2/2021": 900,
    "4/3/2021": 300
  };

  $(".priceCalendar").datepicker({
    changeMonth: true,
    changeYear: true,
    onChangeMonthYear: (year, month, widget) => {  
      // launch timer to check when the value of month included in td's is month
      var timer = setInterval(function() {
        let $m = widget.dpDiv.find(".ui-datepicker-calendar td[data-month]");
        if (parseInt($m.first().data("month"), 10) + 1 == month) {
          clearInterval(timer);
          addCustInfoCalendar(datePriceObj, $m);
        }

      }, 50);//every 50ms
    },
  });
  // diplay price when datepicker is first loaded
  addCustInfoCalendar(datePriceObj, $(".priceCalendar").find(".ui-datepicker-calendar td"));

});

function addCustInfoCalendar(obj, cal) {

  setTimeout(() => {
    cal.filter((_, e) => {
      let date = (parseInt(e.dataset.month) + 1) + "/" + e.innerText + "/" + e.dataset.year;
      if (/\d/.test(date) && obj[date] !== 'undefined') {
        $(e).find("a").attr('data-custom', obj[date]);
      }
    });
  }, 0);
}

.ui-datepicker .weekend .ui-state-default {
    background: #FEA;
}

.ui-datepicker-calendar {
    width: 100%;
}

.ui-datepicker-calendar > td > a {
    position: relative;
    padding-bottom: 20px;
}

.ui-datepicker-calendar td a[data-custom]::after {
    content: 'Rs. ' attr(data-custom);
    display: block;
    font-size: small;
}

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>


<div class="priceCalendar">
</div>

【讨论】：