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
- Open fiddle in GOOGLE CHROME
- Choose 10 Oct as start date
- Choose 23 Oct as End Date
- 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)..
- I couldn't overwrite css of live link, so design looks little bit owkword..
