Fermer jQuery Datepicker lors de la fermeture jQuery Dialog

Question

Première fois ici, et plus d'un concepteur de sites Web que programmeur, alors soyez gentil! ; o) Quoi qu'il en soit, comme le titre le suggère, j'ai une fenêtre de dialogue qui est ouverte et à l'intérieur, un piqueur de date. Ce que je veux que, si l'utilisateur ouvre le calendrier, puis clique sur le bouton de fermeture de la fenêtre de dialogue, le calendrier est également fermé.

Voici ce que j'ai à l'heure actuelle:

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

Mais je suis un peu déconcerté quant à la façon de le faire. Quelqu'un a-t-il des conseils? Ce serait très apprécié!

Merci Phil

Answer 1

Ajouter le rappel proche de votre boîte de dialogue comme celui-ci:

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

est ici une approche globale qui est légèrement mieux, sélecteurs plus simples et les sélecteurs de date ne sont pas créés jusqu'à ce que la la boîte de dialogue est en fait ouverte, donc si un utilisateur n'y entre jamais, moins de script en cours d'exécution:

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