I created a custom date range picker using the jQuery UI.
It works fine in another browser, but it doesn’t work properly on Google.
See the binding below.
The red round should be empty, but it gets some text, possibly due to 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 do not think this is a problem with css because it works fine in other browsers even in IE.
I also found that this happens when and when I assign minDate to any of the datepicker, see my comments in js code. If I delete these lines, datepicker works fine, but since I use a custom datepicker range, do I need these lines, can I use any other alternative?
Here is the fiddle. LINK
- Open violin on GOOGLE CHROME
- Select October 10 as the start date.
- Choose October 23 as the end date
- Now open one of the dumpers one by one and hover over the dates, and you will see an additional date, as I added in the snap-in (above).
- I could not rewrite the css of the direct link, so the design looks a little different.