我使用
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 ..
