Question

是否可以为不同的日期类型分配不同的悬停方法？

例如：

beforeShowDay: function(dDate){
              if(condition1){
                  //assign specific method to the "available" type / cell
                  return [true, 'Available', 'specific text'];
              }else if(condition2){
                  //assign specific method to the "not available" type / cell
                  return [false, 'Full', 'specific text'];
              }
              //and so on...
}

我的问题是我不知道如何访问datepicker表的特定单元格元素。我知道如何为每个单元格提供相同的悬停功能，但不知道如何为特定的日期类型分配不同的功能。

使用CSS更改颜色和内容会起作用，但我需要在悬停功能中添加一些其他功能。例如在另一个div中显示一些文本。

解决

我为我的问题找到了一个解决方案，但它的方向与假设完全不同。使用以下代码，我能够为每个单元格类型/日期类型定义不同的悬停函数：

function setCellHover() {
$(".ui-datepicker-calendar tbody td").mouseenter(function() {

    if($(this).attr("class").indexOf("Available") != -1){
        //do your specific stuff for the "available" cell-type here
    }else if($(this).attr("class").indexOf("Full") != -1){
        //do your specific stuff for the "full" cell-type here
    }//and so on...
    });
}

正如您所看到的，我只是查找当前单元格的css className，它是在datepicker的“beforeShowDay”选项中设置的。然后我在那里分配不同的悬停行为。

Answer 1

我知道两种方式，而且两种方式都不是很好。

var dateElements = $("td[data-month][data-year]", calendar);
dateElements.each(function() {
    var day = parseInt($(this).text(), 10);
    var month = $(this).data("month");
    var year = $(this).data("year");
    var dateElement = $(this);
    dateElement.mouseover(function() {
        console.log(day, month, year);
    });
});

另一种是使用奇数beforeShowDay可选参数生成类。 http://api.jqueryui.com/datepicker/#option-beforeShowDay

beforeShowDayType：Function（Date date）   默认值：null

函数将日期作为参数并且必须返回   一个数组，[0]等于true / false，表示是否这样   日期是可选择的，[1]等于CSS类名称或“”   默认演示文稿，[2]此日期的可选弹出工具提示。   在显示之前，会在datepicker中调用它。

您的请求是一个常见的用例场景，所以希望有人可以为我们提供更好的方法。

JQuery Datepicker - 特定单元格/日期类型的不同悬停行为？

解决

1 个答案: