0

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

例如：

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...
    });
}

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

4

1 回答 1

0

我知道有两种方法，但都不是很好。

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：函数（日期日期）默认值：null

函数将日期作为参数，并且必须返回一个数组，其中 [0] 等于 true/false 指示此日期是否可选，[1] 等于 CSS 类名称或默认表示为 ""，并且 [ 2] 此日期的可选弹出工具提示。在显示之前，它会在日期选择器中的每一天被调用。

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

于 2013-03-18T22:59:46.160 回答