在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 ..

來源

2017-09-30 Bharat

好像與鉻更新之前鉻61的錯誤，這工作得很好。之後，我看到OP的問題。 – Zyren

我有你自己的問題。

Chrome似乎無法正確解析Unicode字符&＃xa0。

所以在你的jquery-ui * .js中搜索&＃xa0並替換爲「」。

我只替換了指定的字符出現次數（在該文件中搜索「ui-datepicker-other-month」），它起作用。

來源

2017-10-06 11:27:15

它的工作，謝謝！但我仍然不明白，這個「＆＃xa0」實際上做了什麼？以及如果我從整個js文件中刪除它呢？ – Bharat

「＆＃xa0」是非破壞空間的Unicode。我認爲從整個js文件中刪除時應該小心。您應該閱讀使用字符的那段代碼，以確切知道爲什麼使用該字符。這種方法對於防止任何異常很有用。 –

雖然這個答案在技術上解決了這個問題，但我很肯定這應該在Chrome的最後修補。我不會建議更新jquery ui datepicker代碼，除非你絕對必須爲了解決問題，直到chrome可以修補它。 – Zyren

正如Zyren指出這似乎已經在Chrome 61推出的一個錯誤已經固定在Chrome 62

來源

2017-10-19 18:32:39

在jQuery UI datepicker中的Google chrome問題

回答

相關問題