Question

I have a page with 2 date fields defined as shown (only diff is the name/id).

<input type="text" id="wsFromDate" name="wsFromDate" size="10" maxlength="10" class="font8_input" value="<%=wsFromDate%>" onfocus="javascript:fncAjaxClear()" />

If I click the image by the first date field, the datepicker pops up.
If I then click in the second date field, the original datepicker stays visible, unless I click the image on the second date field.
However, if I select another input field on the form, the datepicker closes.

What I would like to heapen is on clicking in the second date box, the datepicker associated with the first date field to close.

The jquery code is

$.datepicker.setDefaults({
        showOn: "button",
        buttonImage: "../images/calendar.gif",
        changeYear: true,
        changeMonth: true,
        buttonImageOnly: true
})
$( "#wsFromDate" ).datepicker();
$( "#wsToDate" ).datepicker();

Thanks

Answer 1

Try this: http://jsfiddle.net/htpgB/5/

This will hide any instance of jQuery’s ui-datepicker whenever a “datepicker field” loses focus.

$(function() {
    $.datepicker.setDefaults({
        showOn: "button",
        buttonImage: "http://cymbio.cysive.com/images/calendar.gif",
        changeYear: true,
        changeMonth: true,
        buttonImageOnly: true
    });
    $( "#wsFromDate" ).datepicker();
    $( "#wsToDate" ).datepicker();

    $(':data("datepicker")').on('blur', function() {
        $(this).datepicker('hide');
    });
});

function fncAjaxClear() {
    $('div.AjaxSuggest').html('').css('border-width', 0);
}