JQuery UI datepicker中的Google Chrome问题

前端之家收集整理的这篇文章主要介绍了JQuery UI datepicker中的Google Chrome问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用 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",autoclose: false,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",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,''];
                }
                if ($("#from").datepicker("getDate") && $("#to").datepicker("getDate") && d < $("#to").datepicker("getDate").getTime() && d > $("#from").datepicker("getDate").getTime()) {
                    return [true,''];
                }
            }
        })
        .on("change",function () {
            from.datepicker("option","maxDate",getDate(this));
            $("#to").datepicker("option",yy");
        });
    });

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

我还发现它发生在我将minDate分配给任何datepicker的时候,当我在js代码中查看我的注释时,如果我删除那行,d​​atepicker工作正常,但是当我使用自定义范围datepicker时,我将需要那些行,可以我用其他任何替代品吗?

这是小提琴. LINK

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

解决方法

我有自己的问题.

Chrome似乎无法正确解析unicode字符& #xa0.

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

我只替换了字符的指定出现(在该文件搜索“ui-datepicker-other-month”)并且它有效.

猜你在找的jQuery相关文章