Jquery DatePicker, используя 2 даты на странице

Question

У меня есть страница с двумя полями даты, определенными, как показано (только diff - это имя / идентификатор).

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

Если щелкнуть изображение по первому полю даты, всплывающее окно выбора даты.
Если я затем щелкну во втором поле даты, исходный указатель даты останется видимым, если я не нажму на изображение во втором поле даты. Однако если я выберу другое поле ввода в форме, средство выбора даты закроется.

То, что я хотел бы получить, - это щелкнуть во втором поле даты, когда средство выбора даты, связанное с первым полем даты, закрывается.

Код jquery:

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

Спасибо

Answer 1

Попробуйте это: http://jsfiddle.net/htpgB/5/

Это будет скрывать любой экземпляр ji-datepicker jQuery всякий раз, когда «поле datepicker» теряет фокус.

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

Answer 2

изменить отображаемое свойство на

showOn: "both"

Редактировать: Добавить следующее

    $('#wsFromDate').click(function(){
        $( "#wsToDate" ).datepicker('hide');
    });
    $('#wsToDate').click(function(){
        $( "#wsFromDate" ).datepicker('hide');
    })

Answer 3

Вы можете добавить этот код для открытия, когда вы щелкаете по полю ввода ( wsFromDate или wsToDate ), а средство выбора даты закрывает другое:

$('#wsFromDate').click(function() {
    $("#wsFromDate").datepicker("show");
});
$('#wsToDate').click(function() {
    $("#wsToDate").datepicker("show");
});

UPDATE

Этот код может помочь вам:

$('#wsFromDate').blur(function() {
    $(this).datepicker("hide");
});
$('#wsToDate').blur(function() {
    $(this).datepicker("hide");
});

Это также должно работать с focusout вместо blur.

Предыдущий код стал бесполезным.

UPDATE

Я не уверен, что полностью понимаю ваш последний комментарий ... чтобы закрыть любой указатель даты без необходимости определять событие закрытия для каждого из них, вы можете добавить селектор класса, например

class="font8_input datepicker"

и используйте этот код:

    $('.datepicker').blur(function() {
        $(this).datepicker("hide");
    });

Вы можете использовать тот же font8_input, если с ним нет проблем.