JqueryUI datepicker запускает размытие ввода перед датой передачи, избегает/обходится?

Ответ 1

Когда пользователь щелкает за пределами поля ввода (для выбора даты), поле ввода будет размыто. Нет. Таким образом, вместо запуска проверки на размытие используйте datepicker onSelect callback.

$('.selector').datepicker({
    onSelect: function(dateText) { /* validation here */ }
});

Если вы хотите сохранить свои onblur-события, вы можете отложить проверку, чтобы позволить datepicker заполнить поле до запуска проверки, например:

$('#myform input').blur(function () {
    setTimeout(function () { /* validation here */ }, 1);
});

Использование setTimeout для обработки concurrency -элементов может выглядеть как взломанный, но из-за однопоточной природы JavaScripts он работает очень хорошо. Джон Ресиг из jQuery-славы рассказывает об этом в этом blogpost.

Ответ 2

Я нашел единственный способ последовательно получать как клавиатуру, так и команды выбора выбора, работающие со следующим кодом:

 $(".date-picker")
            .datepicker("option", "onSelect", function (dateText, inst) {
                // User Method
            })
            .change(function () {
                // User Method
            });

Проблема с использованием только размытия событий заключается в том, что (при выборе) datepicker запускает событие размытия на входе до того, как значение было передано ему.

Ответ 3

Вы можете попробовать следующее:

$(".date-pick").datepicker({
...
onSelect: function() {
this.focus();
},
onClose: function() {
this.blur();
}
...

Ответ 4

Магнарс отвечает выше, очень хорошо. Просто для того, чтобы дать дополнительную информацию для потомков, здесь также подход, который хорошо работает с фреймворками валидации, которые делают проверку на размытие. Я фактически отменяю событие blur, которое было настроено с помощью проверки на document.ready/pageload (довольно распространенный шаблон для проверки), а затем вернул его в параметр onclose datepicker. Событие закрытия datepicker, по-видимому, происходит после того, как datepicker передал информацию в поле, так что это нормально для проверки размытости, выполняемой в этой точке. Таким образом, я не должен делать ничего особенного для поля в самом коде проверки. Любой подход, вероятно, применим ко всему, что кто-либо делает, если они сталкиваются с этим.

$('#datefield').datepicker(
{beforeShow: function(input) {
                             $(input).unbind('blur');
             },
 onClose: function(dateText, inst) {
                             $(this).validationEngine();this.focus();this.blur() }
});

(В моей структуре ".validationEngine()" это то, что регистрирует обработчики проверки)

Ответ 5

Наклон этой темы, потому что у меня возникли трудности с принятым решением.

Мне было проще вызвать событие "change", когда срабатывает событие datepicker "onClose". Это гарантирует, что событие изменения входного элемента всегда срабатывает:

$('#my_element').datepicker({
    onClose: function() {
        $(this).trigger('change');
    }
});

Это может показаться глупым, потому что оно срабатывает в то время, когда ничего не изменилось. Тем не менее, он работает более надежно, чем datepicker 'onSelect', и помог мне избежать проблем с аккомпанементом или размытием событий, которые происходят перед событиями datepicker.

Ответ 6

Создайте свое пользовательское событие в jquery и привяжите его к текстовому поле. После этого запускается событие on onclose event datepicker. Таким образом, если вы перейдете из текстового поля, то пользовательское событие будет запущено.

$("inputText").bind('CustomEventName',function(){//your validate method code});

и в параметре Datepicker

$("#inputText").datePicker({onClose:function(){ $(this).trigger('CustomEventName')});

Ответ 7

У меня была такая же проблема, как и вы, и ответ Магнар помог, но не полностью ответил на проблему.

Вы определили основную причину. Действие пользователя, взаимодействующего с календарем, удаляет фокус из поля ввода. Это (в случае ненавязчивой проверки jquery) вызовет событие onBlur, инициировав проверку этого поля ввода. В этот момент значение остается прежним, пока пользователь не выберет что-то.

Следовательно, опираясь на ответ Магнар, он утверждает, что вам нужно повторно проверить поле ввода в календаре календаря. Наиболее очевидным способом является вызов $("form").valid(), однако это подтверждает всю форму.

Лучше всего просто проверить поле ввода, связанное с выбором даты, и вы можете вызвать это, выполнив следующее:

$('#myform input').blur(function () {
    var that = this;
    setTimeout(function () {
        $(that).trigger("focus").trigger("blur");
    }, 100);
});

Теперь только ваше поле ввода проверено, потому что вы подделали пользователя, щелкнув его и вне поля ввода.