jquery日期选择器-在设置defaultDate时防止鼠标悬停事件

jquery datepicker - prevent mouseover event when setting defaultDate

本文关键字：鼠标 悬停 事件 defaultDate 选择器 日期 设置 jquery      更新时间：2023-09-26

我设置了一个jquery日期选择器，它会跳转到默认日期。这很简单，但是，我还为每个可选择的日期附加了一个鼠标悬停事件。因此，当日期选择器设置默认日期时，它还会触发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>

这可能是有史以来最棘手的解决方案。但由于日期选择器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会触发一个鼠标悬停来关注当天，并向td添加一个ui-datepicker-days-cell-over类。不过，我不知道如何在默认日期再次启用mouseover，而不会破坏任何内容。（因为我不知道ui-datepicker-cell-over类到底用于什么）

相关文章：