Question

我有一个页面，其中显示了2个日期字段，如图所示（只有diff是名称/ ID）。

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

如果我按照第一个日期字段点击图像，则会弹出日期选择器如果我然后单击第二个日期字段，原始日期选择器将保持可见，除非我单击第二个日期字段上的图像。但是，如果我在表单上选择另一个输入字段，则datepicker将关闭。

我想要解决的是点击第二个日期框，与要关闭的第一个日期字段关联的日期选择器。

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/

每当“datepicker字段”失去焦点时，这将隐藏jQuery的ui-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 ）时，datepicker会关闭另一个：

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

<强>更新

此代码可以帮助您：

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

这也适用于focusout而不是blur。

之前的代码变得毫无用处。

<强>更新

我不确定完全理解你的上一条评论...要关闭任何一个日期选择器，而不必为每一个定义一个关闭事件，你可以添加类选择器，如

class="font8_input datepicker"

并使用此代码：

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

如果没有问题，您可以使用相同的font8_input。

Jquery datepicker在页面上使用2个日期

3 个答案: