Закрытие jQuery Datepicker при закрытии диалогового окна jQuery - PullRequest
Новая
       32

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

4 голосов
/ 20 января 2010

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

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

        <!--// 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                               
        });

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

Спасибо Фил

1 Ответ

4 голосов
/ 20 января 2010

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

$(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');
    });
});
...