Проблема Google chrome в jQuery UI datepicker
Я создал пользовательский выбор диапазона дат с помощью пользовательского интерфейса Jquery.
Он отлично работает в другом браузере, но в Google он не работает должным образом.
Смотрите ниже snap.
Красный круг должен быть пустым, но он получает некоторый текст, возможно, из-за петель, но я не могу понять его.
Мой код 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",
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");
});
});
Я не думаю, что это проблема с css, потому что он отлично работает на других браузерах, даже в IE.
Я тоже обнаружил, что это происходит, когда и когда я назначаю minDate любому из datepicker, смотрите мои комментарии в коде js, если я удаляю эти строки, datepicker работает нормально, но поскольку я использую пользовательский диапазон datepicker, мне понадобятся эти строки, могу ли я использовать любую другую альтернативу?
Вот скрипка. Ссылка
откройте fiddle в GOOGLE CHROME- выберите 10 октября в качестве даты начала
- выберите 23 октября в качестве даты окончания
- Теперь откройте оба датапикера один за другим и наведите курсор на даты, и вы увидите дополнительную дату, как я добавил в snap (выше)..
- я не смог перезаписать css live link, поэтому дизайн выглядит немного owkword..
2 ответов:
У меня была своя проблема.
Chrome, похоже, неправильно разрешает символ Юникода .
Так что ищите в вашем jQuery-ui*.js и заменить на "".
Я заменил только указанное появление символа (поиск "ui-datepicker-other-month" в этом файле), и это работает.
Comments