5
Ich habe benutzerdefinierte Datumsbereichsauswahl mit Jquery UI erstellt.Google Chrome Problem in JQuery UI Datepicker
Es funktioniert perfekt in anderen Browser, aber in Google funktioniert es nicht richtig.
Siehe unten Snap.
Die rote Runde sollte leer sein, aber es wird etwas Text, vielleicht wegen Schleifen, aber ich kann es nicht herausfinden.
Mein 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");
});
});
Ich glaube nicht, dass es Problem mit CSS, weil es perfekt auf anderen Browsern auch in IE funktioniert.
Ich fand auch, dass es tritt auf, wenn und wenn ich minDate zu einem Datepicker, siehe meine Kommentare in js Code zuweisen, wenn ich, dass die Linien zu entfernen, Datepicker funktionieren gut, aber wie ich Zeitraum festlegen picker verwenden, Ich werde diese Zeilen brauchen, kann ich irgendeine andere Alternative benutzen?
Hier ist Geige.
LINK- öffnen Geige in Google Chrome
- wählen 10. Oktober als Startdatum
- 23. Oktober Wählen Sie als Enddatum
- Öffnen Sie nun beide der picker eins nach dem anderen, und schweben über Termine und Sie werden zusätzliches Datum sehen, wie ich im Snap (oben) hinzugefügt habe.
- Ich konnte CSS von Live-Link nicht überschreiben, so sieht Design wenig owkword ..
Scheint 61. vor dem Chrom-Update mit Chrom wie ein Fehler eingeführt worden zu sein, das funktionierte, wurde behoben. Danach sehe ich OPs Problem. – Zyren