Google chrome issue in JQuery UI datepicker

Question

I have created custom Date range picker using Jquery UI.

It works perfectly in other browser but in Google it not works properly.

See below snap.

The red round should be empty, but it gets some text, maybe because of loops but I can't figure it out.

My js code.

 $(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");
        });
    });

I don't think it's issue with css because it works perfectly on other browsers even in IE.

I also found that it occurs when and when I assign minDate to any of datepicker, see my comments in js code, If I remove that lines, datepicker works fine, but as I am using Custom range datepicker, I will need those lines, can I use any other alternative?

Here is fiddle. LINK

1. Open fiddle in GOOGLE CHROME
2. Choose 10 Oct as start date
3. Choose 23 Oct as End Date
4. Now, Open both of the datepicker one by one, and hover over dates and you will see extra date as I added in snap (above)..
5. I couldn't overwrite css of live link, so design looks little bit owkword..

Answer 1

I had your own problem.

Chrome does not seem to correctly resolve the unicode character &#xa0.

So search &#xa0 in your jquery-ui*.js and replace with "".

I replaced only the specified occurence of the character (search "ui-datepicker-other-month" in that file) and it works.

Answer 2

As noted by Zyren this appears to have been a bug introduced in Chrome 61. It has been fixed in Chrome 62.