Closing jQuery Datepicker When Closing jQuery Dialog - jquery-ui

Question

First time here, and more of a web designer than programmer, so be gentle! ;o) Anyway, as the title suggests, I have a dialog window that's opened and within that, a datepicker. What I want it that, if the user opens the datepicker, and then clicks the dialog window's close button, the datepicker is also closed.
Here's what I've got at present:
<!--// 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
});
But I'm a bit flummoxed as to how to do this. Anyone got any advice? It'd be much appreciated!
Thanks
Phil

Answer 1

Add the close callback to your dialog like this:
$(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');
});
});
Here's an all-inclusive approach that's slightly better, simpler selectors and the date pickers aren't created until the dialog is actually opened, so if a user never goes into it, less script running:
$(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');
});
});