0

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

有没有什么方法可以防止这种情况发生在它跳到那个日期时？

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

http://jsfiddle.net/Gyztj/

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

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>
4

1 回答 1

1

这可能是有史以来最 hacky 的解决方案。但是因为 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该类的确切用途）

于 2013-07-04T13:03:28.940 回答