使用这个是 Datepicker UI jQuery

Question

我的日期选择器中有一个 onClick 事件，我正在尝试将 html 附加到实际的 td 元素 I select.

$('#datepicker').datepicker({
  dateFormat: 'dd/mm/yy',
  beforeShowDay: enableAllTheseDays,
  dayNamesMin: ["M", "T", "W", "T", "F", "S", "S"],
  showOtherMonths: true,
  onSelect: function(date) {

    for (var i = 0; i < dateArray.length; i++) {

      if (date === dateArray[i].date) {

        $(this).append("<div class=\"class " + date + "\"><span>Pick a time</span><span class=\"times_available\">" + dateArray[i].time + "</span><span class=\"tickets_left\">" + dateArray[i].stock_qt + " tickets left<span></div>");
        console.log(this);

      }
    }
  }
});

html就是：<div id="datepicker"></div>

忽略所有循环，但基本上，当我在 onSelect 中使用 $(this) 时，this 指的是我的日期选择器。不是 td 元素 I select。如果我使用 date jQuery UI 给我的东西，它会显示我 select 的 td 元素的日期。所以我显然可以读取每个 td，如何将 html 附加到我单击的 td 元素。

我尝试在此 onSelect 之外做一个 onClick，但如果我这样做，我会更改月份。 onClick 事件没有触发。

Answer 1

如果你真的想访问点击的<td>，你可以如下破解。请注意，这是基于未记录属性的 hack，因此它可能会在未来的版本中中断。

$(function() {
  $("#datepicker").datepicker({
    onSelect: function(date, instance) {
      var data = date.split('/');
      var month = data[0] < 10 ? data[0].charAt(1) - 1 : data[0] - 1;
      var day = data[1] < 10 ? data[1].charAt(1) : data[1];
      var year = data[2];
      var $table = instance.dpDiv;
      var td = $table.find('tbody td').filter(function(i, el) {
        var $el = $(el);
        var $a = $el.find('a');
        return ($a.text() == day && $el.data('month') == month && $el.data('year') == year);
      });
    }
  });
});

<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<link href="//code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<input id="datepicker">

Answer 2

由于 jQuery 为日历动态添加了 table，您将不得不跳过一些 css 选择器和过滤器框才能到达您想要的单元格。

.ui-datepicker-calendar td 应该会为您提供日历中的所有单元格。您可以编写一个回调函数，通过对日期执行测试来按值过滤单元格。找到单元格后，就可以进行追加了。

$(".ui-datepicker-calendar td").filter(function() {
  var date = $(this).text();
  return /\d/.test(date);
}).append('Blah'); // Whatever you want to append.

})

使用这个是 Datepicker UI jQuery

Using this is Datepicker UI jQuery

javascript

jquery

html

jquery-ui

jquery-ui-datepicker