Как обращаться с контролем datepicker?


Я использую элемент управления jQuery ui datepicker на текстовом поле и в то же время я использую событие onblur для проверки. Теперь проблема заключается в том, что при нажатии на текстовое поле и календарь появляется, и когда вы выбираете дату в нем проверка выполняется на текстовом поле. Я пытаюсь справиться с ним, но он все равно появляется на секунду.

Вот код

$(document).ready(function () {

    $("#date").datepicker({
        onSelect: function () {
            $("#span1").css("display", "none")
        }
    });
});

function check() {
    if ($("#date").val() == "") $("#span1").css("display", "inline-block");
}

Для лучшего понимания здесь есть jsfiddle link

Правка: окончательное решение: принят самый близкий ответ, представленный первым.

$("#date").datepicker({
    onClose: function() {
        check();
    }
});
3 2

3 ответа:

Вместо on blur для поля ввода, вы также можете вызвать check, когда datepicker закрывается.

$("#date").datepicker({
    onSelect: function () {
        $("#span1").css("display", "none")
    },
    onClose: function() {
        check();
    }
});

Использование setTimeout:

$(document).ready(function () {
    $("#date").datepicker({
        onSelect: function () {
            $("#span1").css("display", "none")
        }
    });
});


function check() {
    setTimeout(function(){
        if ($("#date").val() == "") 
            $("#span1").css("display", "inline-block")
            }, 100);
}

Демо: http://jsfiddle.net/dirtyd77/4Vp9D/26/

Вместо того, чтобы изобретать свое собственное колесо, могу ли я предложить использовать этот легкий плагин? http://digitalbush.com/projects/masked-input-plugin/

Он также хорошо работает с jQuery UI DatePicker и избавит вас от необходимости выполнять собственную проверку формата даты.