在jQuery UI datepicker中的Google chrome问题

问题描述:

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

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

请参阅下面的快照。

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

enter image description here

我的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

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

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

我有你自己的问题。

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

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

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

+0

它的工作,谢谢!但我仍然不明白,这个“&#xa0”实际上做了什么?以及如果我从整个js文件中删除它呢? – Bharat

+0

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

+2

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

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