使用这是 Datepicker UI jQuery [重复]答案

【问题标题】：Using this is Datepicker UI jQuery [duplicate]使用这是 Datepicker UI jQuery [重复]
【发布时间】：2016-06-22 09:10:26
【问题描述】：

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

$('#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 元素。如果我使用date jQuery UI 给我的东西，它会显示我选择的 td 元素的日期。所以我显然可以阅读每个td，如何将html附加到我点击的td元素。

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

【问题讨论】：

你能不能也用html粘贴代码..小提琴会很有帮助
html 只是 <div id="datepicker"></div>，因为我使用的是 jQuery UI。 Jquery UI 给了我日历，我只需要将它附加到一个 ID 上。当我单击 td 元素时，我只是在努力定位它。
我相信你想用 td 对.. td 和 datepicker 所在的整个块做点什么，你能把那个部分也放上去吗？
JFiddle 仍然有用。
@SmurfEkko 所以你想在日期中附加一些东西，对吧？

标签： javascript jquery html jquery-ui jquery-ui-datepicker

【解决方案1】：

由于 jQuery 为日历动态添加表格，因此您将不得不跳过一些 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.

})

【讨论】：

【解决方案2】：

如果你真的想访问被点击的<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">

【讨论】：