Question

我在jquery日历中突出显示了一些日期。现在，我想清除（取消高亮显示）单击按钮时的日期。

$("#datepicker").datepicker({
    beforeShowDay: function(date) {
        // check if date is in your array of dates
        console.log(datesdata);
        var selecteddates = datesdata[date];
        if (selecteddates) {
            // if it is return the following.
            return [true, 'event', 'Tooltip text'];
        } else {
            // default
            return [true, '', ''];
        }
    }
});

$("#clear").click(function() {
    alert();
    $('#datepicker').removeClass('event');
});

Answer 1

您正尝试从event删除课程#datepicker。但datepicker插件并未将该类应用于input，而是将其添加到由{{1}生成的DOM的特定td中}。

你需要的是重新渲染以前生成的DOM（可能还有其他黑客，但这应该是标准的方法）。代码：

datepicker

现在，诀窍是更新＆＃34;输入/选项＆＃34;在调用上述$("#datepicker").datepicker("refresh");选项之前datepicker。

这样做的一种方法可能是拥有一个标记，例如“突出显示”，refresh何时应该为true添加类，反之亦然。

false

这是一个演示：

（我对$("#clear").click(function() { // set flag to false on clear highlight = false; // re-init the datepicker $("#datepicker").datepicker("refresh"); });做了一些假设，但是你没有提供这些假设，强烈建议你在SO中提出任何问题。

＆＃13;

datesdata

＆＃13;

$(function() {

  // array of date objects, should highlight dates 5, 10 and 15 Dec
  var datesdata = [new Date("December 5, 2017 00:00:00"),
    new Date("December 10, 2017 00:00:00"),
    new Date("December 15, 2017 00:00:00"),
    new Date("December 20, 2017 00:00:00")
  ];

  // flag set to true by default
  var highlight = true;


  $("#datepicker").datepicker({
    beforeShowDay: function(date) {
      // convert date to time in milliseconds for comparison
      var datesdata_Time = datesdata.map(function(d) {
        return d.getTime();
      });

      if (highlight && datesdata_Time.indexOf(date.getTime()) > -1) {
        // if it is return the following.
        return [true, 'event', 'Tooltip text'];

      } else {
        // default
        return [true, '', ''];
      }
    }
  });

  $("#clear").click(function() {
    // set flag to false on clear 
    highlight = false;
    // re-init the datepicker
    $("#datepicker").datepicker("refresh");
  });

  //additional
  $("#toggle").click(function() {
    highlight = !highlight;
    $("#datepicker").datepicker("refresh");
  });
});

＆＃13;

.event {
  background: yellow;
  border: 2px solid #f00 !important;
}

＆＃13;

如何在点击按钮

1 个答案: