Question

我已经设置了一个跳转到默认日期的jquery datepicker。这很简单，但是，我还在每个可选日期附加了一个鼠标悬停事件。因此，当datepicker设置默认日期时，它还会触发鼠标悬停事件。

有没有办法阻止这种情况发生，只有当它跳到那个日期？

这是一个小提琴应该让它更清晰......警告应该在鼠标悬停时发生，但不是在打开日期选择器时发生。

这是我的代码（因为它坚持我包含它）

function dateDiffInDays(a, b) {
  // Discard the time and time-zone information.
  var utc1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
  var utc2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());

  return Math.floor((utc2 - utc1) / (1000 * 60 * 60 * 24));
}

var firstStartDate;

$('.Cal').datepicker({

        firstDay: 1,
        minDate: 0,
        maxDate: '+2Y',
        numberOfMonths: 1,

        beforeShow: function(input, inst) {
            startDates = [];            
            selectdatesElem = $(input).siblings("select.startdates");   
            firstStartDate = selectdatesElem.find("option:eq(1)").val().split(', ');
            $(input).datepicker('option','defaultDate',dateDiffInDays(new Date(), new Date(parseInt(firstStartDate[1], 10) + "/" + parseInt(firstStartDate[2], 10) + "/" + parseInt(firstStartDate[0], 10))));

            $(input).siblings("select.startdates").find("option").each( function() {
                  startdateParts = $(this).val().split(', ');
                  startDates.push(startdateParts[0] + ", " + (parseInt(startdateParts[1], 10)-1) + ", " + parseInt(startdateParts[2], 10));
            }); 

        },

        beforeShowDay: function(date) {         
            for (i = 0; i < startDates.length; i++) {
                  if (date.getFullYear()+", "+date.getMonth()+", "+date.getDate() == startDates[i]) {
                        return [true, 'eventDay'];
                  }
            }           
            return [false, ''];
        }
    });

$(document).on("mouseover", "td.eventDay", function() {
        alert("Hello World!")
    });

和

<input class='Cal' />

<select name="startDates"  id="startDates" class="startdates">
    <option selected="selected" value="%">%</option>
    <option value="2013, 11, 01">C1</option>
    <option value="2013, 11, 08">C1</option>
    <option value="2013, 11, 11">C1</option>
    <option value="2013, 11, 18">C1</option>
    <option value="2013, 11, 29">C1</option>
    <option value="2013, 11, 25">C1</option>
    <option value="2013, 12, 06">C1</option>

</select>

Answer 1

这可能是有史以来最苛刻的解决方案。但是因为datepicker api在初始化时使用鼠标悬停，这是我唯一能想到的：

$(document).on("mouseover", "td.eventDay", function() {
    if($(this).hasClass("ui-datepicker-days-cell-over")){
        //alert("do nothing");
        $(this).removeClass('ui-datepicker-days-cell-over');
    }
    else{
        alert("hacky solution should work");
    }
    });

基本上，当您设置默认日期时，jquery会触发鼠标悬停以关注当天，并向ui-datepicker-days-cell-over添加td类。虽然，我不知道如何在默认日期再次启用鼠标悬停，而不会破坏任何东西。（因为我不知道ui-datepicker-cell-over类究竟用于什么）

jquery datepicker - 在设置defaultDate时阻止鼠标悬停事件

1 个答案: