JQuery UI datepicker onChangeMonthYear 获取 td

Posted 2023-05-08

【中文标题】JQuery UI datepicker onChangeMonthYear 获取 td

【英文标题】：JQuery UI datepicker onChangeMonthYear get td's

【发布时间】：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

【参考方案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>