在jQuery UI datepicker中的Google chrome问题

问题描述：

我已经使用jquery UI创建了自定义日期范围选择器。在jQuery UI datepicker中的Google chrome问题

它在其他浏览器中完美工作，但在谷歌它不能正常工作。

请参阅下面的快照。

红色的圆应该是空的，但它会得到一些文字，也许是因为循环，但我无法弄清楚。

我的js代码。

$(function() { 

     from = $("#from").datepicker({ 
      defaultDate: "+1w", 
      numberOfMonths: 2, 
      minDate: +7, //THIS IS FIRST PLACE 
      autoclose: false, 
      beforeShow: function (input, inst) { 
       $("#ui-datepicker-div td").off(); 

       $(document).on("mouseenter", "#ui-datepicker-div td", function (e) { 
        $(this).parent().addClass("finalRow"); 
        $(".finalRow").parents('.ui-datepicker-group-last').parent().find('.ui-datepicker-group-first').find('tr').last().addClass("finalRowRangeOtherTable"); 
        $(".finalRow").prevAll().find("td:not(.ui-datepicker-unselectable)").removeClass("highlight"); 
        $(this).prevAll("td:not(.ui-datepicker-unselectable)").removeClass("highlight"); 
       }); 
      }, 
      beforeShowDay: function (date) { 
       var d = date.getTime(); 
       if ($("#to").datepicker("getDate") && d == $("#to").datepicker("getDate").getTime()) { 
        return [true, 'ui-red', '']; 
       } 

       if ($("#from").datepicker("getDate") && $("#to").datepicker("getDate") && d < $("#to").datepicker("getDate").getTime() && d > $("#from").datepicker("getDate").getTime()) { 
        return [true, 'ui-state-highlight', '']; 
       } else { 
        return [true, '']; 
       } 
      }, 
      onClose: function (selectedDate) { 
       var selectedDate = $("#from").datepicker("getDate"); 
       if (selectedDate != null) { 
        $('#to').datepicker('option', 'minDate', selectedDate).datepicker('refresh'); //THIS IS SECOND PLACE 
       } 
       $("#from").datepicker("option", "dateFormat", "d MM, yy"); 
       $("#to").datepicker("show"); 
      } 
     }) 

     to = $("#to").datepicker({ 
      defaultDate: "+1w", 
      numberOfMonths: 2, 
      autoclose: false, 
      beforeShow: function (input, inst) { 
       $("#ui-datepicker-div td").off(); 

       $(document).on("mouseenter", "#ui-datepicker-div td", function (e) { 

        $(this).parent().addClass("finalRow"); 
        $(".finalRow").parents('.ui-datepicker-group-last').parent().find('.ui-datepicker-group-first').find('tr').last().addClass("finalRowRangeOtherTable"); 
        $(".finalRowRangeOtherTable").find("td:not(.ui-datepicker-unselectable)").addClass("highlight"); 
        $(".finalRowRangeOtherTable").prevAll().find("td:not(.ui-datepicker-unselectable)").addClass("highlight"); 

        $(".finalRow").prevAll().find("td:not(.ui-datepicker-unselectable)").addClass("highlight"); 
        $(this).prevAll("td:not(.ui-datepicker-unselectable)").addClass("highlight"); 
       }); 

       $(document).on("mouseleave", "#ui-datepicker-div td", function (e) { 

        $(this).parent().removeClass("finalRow"); 
        $("#ui-datepicker-div td").removeClass("highlight"); 

        $(".finalRowRange").removeClass("finalRowRange").find('.highlight').removeClass("highlight"); 
        $(".finalRowRangeOtherTable").removeClass("finalRowRangeOtherTable").find('.highlight').removeClass("highlight"); 

       }); 
      }, 
      beforeShowDay: function (date) { 
       var d = date.getTime(); 
       if ($("#from").datepicker("getDate") && d == $("#from").datepicker("getDate").getTime()) { 
        return [true, 'ui-red', '']; 
       } 
       if ($("#from").datepicker("getDate") && $("#to").datepicker("getDate") && d < $("#to").datepicker("getDate").getTime() && d > $("#from").datepicker("getDate").getTime()) { 
        return [true, 'ui-state-highlight', '']; 
       } else { 
        return [true, '']; 
       } 
      } 
     }) 
     .on("change", function() { 
      from.datepicker("option", "maxDate", getDate(this)); 
      $("#to").datepicker("option", "dateFormat", "d MM, yy"); 
     }); 
    });

我不认为这是问题的CSS，因为它完美的作品上，即使在IE的浏览器。

我还发现，它发生的时候，当我给你的minDate任何日期选择器的，看到的js代码我的意见，如果我删除线，日期选择器工作正常，但由于我使用自定义范围日期选择器，我需要这些线路，我可以使用其他选择吗？

这里是小提琴。 LINK

Google Chrome中打开小提琴
选择10月10日开始日期
选择10月23日为结束日期现在
，同时打开日期选择器一个接一个，而将鼠标悬停在日期你会看到额外的日期，因为我添加在捕捉（上面）..
我不能覆盖活链接的CSS，所以设计看起来有点owkword ..

好像与铬更新之前铬61的错误，这工作得很好。之后，我看到OP的问题。 – Zyren

答

我有你自己的问题。

Chrome似乎无法正确解析Unicode字符&＃xa0。

所以在你的jquery-ui * .js中搜索&＃xa0并替换为“”。

我只替换了指定的字符出现次数（在该文件中搜索“ui-datepicker-other-month”），它起作用。

它的工作，谢谢！但我仍然不明白，这个“＆＃xa0”实际上做了什么？以及如果我从整个js文件中删除它呢？ – Bharat

“＆＃xa0”是非破坏空间的Unicode。我认为从整个js文件中删除时应该小心。您应该阅读使用字符的那段代码，以确切知道为什么使用该字符。这种方法对于防止任何异常很有用。 –

虽然这个答案在技术上解决了这个问题，但我很肯定这应该在Chrome的最后修补。我不会建议更新jquery ui datepicker代码，除非你绝对必须为了解决问题，直到chrome可以修补它。 – Zyren

答

正如Zyren指出这似乎已经在Chrome 61推出的一个错误已经固定在Chrome 62

在jQuery UI datepicker中的Google chrome问题

相关推荐