jquery-ui - 关闭 jQuery 对话框时关闭 jQuery Datepicker

Question

第一次来这里，更像是一个网页设计师而不是程序员，所以要温柔! ;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                               
        });

但我对如何做到这一点感到有些困惑。有人有什么建议吗？将不胜感激!

谢谢
菲尔

Answer 1

将关闭回调添加到您的对话框中，如下所示:

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