我使用
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代码中查看我的注释时,如果我删除那行,datepicker工作正常,但是当我使用自定义范围datepicker时,我将需要那些行,可以我用其他任何替代品吗?
这是小提琴. LINK
>在GOOGLE CHROME中打开小提琴
>选择10月10日作为开始日期
>选择10月23日作为结束日期
>现在,逐个打开两个日期选择器,并将鼠标悬停在日期上,您将看到我在snap(上面)中添加的额外日期.
>我无法覆盖实时链接的CSS,所以设计看起来有点像owkword ..