Закрытие jQuery Datepicker при закрытии диалогового окна jQuery

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

Вот что у меня есть на данный момент:

        <!--// Modal Windows -->        
        $.ui.dialog.defaults.bgiframe = true;
        $(function() {
            $('#advanced_search').dialog({
                autoOpen: false,
                width: 600,
                height: 400,
                modal: true,
                resizable: false,
                draggable: false,
                title: 'Advanced Search',
            });
            $('.adv_search').click(function() {
                $('#advanced_search').dialog('open');
            });
        });

        <!--// Date Picker -->
        $("#advanced_search .start_date").datepicker({
            dateFormat: 'dd/mm/yy',
            showButtonPanel: true,
            duration: 0,
            constrainInput: true,
            showOn: 'button',               
            buttonImage: '/img/icons/50.png',
            buttonImageOnly: true                               
        });
        $("#advanced_search .end_date").datepicker({
            dateFormat: 'dd/mm/yy',
            showButtonPanel: true,
            duration: 0,
            constrainInput: true,
            showOn: 'button',
            buttonImage: '/img/icons/50.png',
            buttonImageOnly: true                               
        });

Но я немного смущен тем, как это сделать. У кого-нибудь есть совет? Это было бы очень признательно!

Спасибо, Фил.


jquery-ui jquery-ui-datepicker jquery-ui-dialog
person Phil    schedule 20.01.2010    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Добавьте обратный вызов закрытия в диалоговое окно следующим образом:

$(function() {
   $('#advanced_search').dialog({
        autoOpen: false,
        width: 600,
        height: 400,
        modal: true,
        resizable: false,
        draggable: false,
        title: 'Advanced Search',
        close: function() { 
          $("#advanced_search .start_date").datepicker('hide');
          $("#advanced_search .end_date").datepicker('hide');
        } 
    });
    $('.adv_search').click(function() {
        $('#advanced_search').dialog('open');
    });
});

Вот комплексный подход, который немного лучше, более простые селекторы и средства выбора даты не создаются до тех пор, пока диалоговое окно не будет фактически открыто, поэтому, если пользователь никогда не заходит в него, выполняется меньше сценариев:

$(function() {
   $('#advanced_search').dialog({
        autoOpen: false,
        width: 600,
        height: 400,
        modal: true,
        resizable: false,
        draggable: false,
        title: 'Advanced Search',
        close: function() { 
          $("#advanced_search .start_date").datepicker('hide');
          $("#advanced_search .end_date").datepicker('hide');
        }, 
        open: function(event, ui) {
          $(".start_date, .end_date", ui).datepicker({
            dateFormat: 'dd/mm/yy',
            showButtonPanel: true,
            duration: 0,
            constrainInput: true,
            showOn: 'button',               
            buttonImage: '/img/icons/50.png',
            buttonImageOnly: true                               
          });
        }
    });
    $('.adv_search').click(function() {
        $('#advanced_search').dialog('open');
    });
});
person Nick Craver    schedule 20.01.2010
comment
Спасибо за сверхбыстрый ответ, Ник. Я смущен, что это было такое простое решение; о) - person Phil; 20.01.2010
comment
@Phil: нет проблем, проверьте еще раз более компактное общее решение, если вы собираетесь запускать много скриптов, это сэкономит несколько циклов ЦП, не создавая вещи, пока они не будут запрошены. Следует отметить, что все объекты jQuery на самом деле являются коллекциями, вы также можете сделать $("#advanced_search .start_date, #advanced_search .end_date,") и сократить дублирующийся код. - person Nick Craver; 20.01.2010
comment
Привет Ник, спасибо за обновление. Я добавил этот код, и Firebug выдает следующую ошибку: отсутствует } после открытия списка свойств: function(event, ui) {\n Есть идеи? - person Phil; 20.01.2010
comment
@Phil - Извините, я никогда этого не видел, добавьте запятую после функции закрытия, ответ был обновлен, щелкните ссылку редактирования, чтобы увидеть, где именно это изменилось - person Nick Craver; 11.03.2010
comment
Не беспокойтесь, я очень ценю время, которое вы потратили, помогая мне в этом! Спасибо!! - person Phil; 23.03.2010