JQuery UI datepicker中的Google Chrome问题

Question

我使用Jquery UI创建了自定义日期范围选择器.

它在其他浏览器中完美运行,但在Google中无法正常运行.

见下文.

红色圆形应该是空的,但是它会得到一些文字,可能是因为循环,但我无法弄明白.

我的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代码我的意见,如果我删除线,日期选择器工作正常,但由于我使用自定义范围日期选择器,我需要那些线,可我用其他任何替代品吗？

这是小提琴.链接

1. 在GOOGLE CHROME中打开小提琴
2. 选择10月10日作为开始日期
3. 选择10月23日作为结束日期
4. 现在,逐个打开两个日期选择器,并将鼠标悬停在日期上,您将看到我在snap中添加的额外日期(上图).
5. 我无法覆盖实时链接的CSS,所以设计看起来有点像owkword ..

Answer 1

我有你自己的问题。

Chrome 似乎无法正确解析 unicode 字符  。

因此，在 jquery-ui*.js 中搜索   并替换为“”。

我仅替换了指定出现的字符（在该文件中搜索“ui-datepicker-other-month”）并且它有效。