Проблема с JQuery Date Picker в модальном окне

Question

Я создал модальную форму / окно, используя код:

    $(function () {
        var widthLen = window.screen.width - 10;
        var heightLen = window.screen.height - 120;
        $("#dialogOperation").dialog({
            width: widthLen,
            height: heightLen,
            closeOnEscape: true,
            modal: true,
            close: function () {
                window.location.href = "OperationMenu.aspx" 
            } 
        });
    });

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

Я хочу показывать календарь только тогда, когда я щелкаю текстовое поле, которое обычно происходит в формах, которые не являются модальными диалоговыми окнами.

Когда я пытался скрыть средство выбора даты, используя:

    $(document).ready(function () {
        $('#txtDate').datepicker('hide');
    });

Мне больше не удавалось показывать календарь, хотя я назову его текстовым фокусом:

    $("#txtDate").focus(function () {
        $('#txtDate').datepicker();
    }).blur(function() {
        $('#txtDate').datepicker('hide');
    });

Я также пытался поместить z-index: 1003 в jquery css, но мне все еще не очень повезло.

.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; z-index: 1003; }

Любой, кто может помочь мне решить эту проблему, был бы очень признателен.

Заранее спасибо !!

С уважением, Харланд

Answer 1

Либо вы можете использовать опцию showOn http://docs.jquery.com/UI/Datepicker#option-showOn

Или сначала отключите средство выбора даты и используйте событие диалога open, чтобы включить его. Отключено, когда диалоговое окно закрыто.

open: function(){
    $('#txtDate').datepicker('enable');

},
close: function() {
    $('#txtDate').datepicker('disable');
}

демо: http://jsfiddle.net/diode/Xawe2/

Answer 2

как насчет 'show' в последней, кроме одной строке?

$("#txtDate").focus(function () {
    $('#txtDate').datepicker();
}).blur(function() {
    $('#txtDate').datepicker('show');
});