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

【问题标题】：Jquery datepicker using 2 dates on pageJquery datepicker 在页面上使用 2 个日期
【发布时间】：2011-12-24 13:06:04
【问题描述】：

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

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

谢谢

【问题讨论】：

标签： jquery datepicker

【解决方案1】：

试试这个：http://jsfiddle.net/htpgB/5/

每当“日期选择器字段”失去焦点时，这将隐藏 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);
}

【讨论】：

在其他函数中看不到任何会导致问题的内容。 [代码] function fncAjaxClear() { var inputs = document.getElementsByTagName("div"); for (var i=0; i
我更新了jsFiddle 以包括您的DIV 需求，并提供了一个jQuery 解决方案。一切都按预期进行。对你起作用吗？如果是这样，它和你所拥有的有什么区别？你看过控制台吗？有什么错误吗？
谢谢艾曼。我看过这个，当我点击第二个日期字段时，仍然显示第一个日期字段中的日期选择器。如果我单击第二个图像，则会加载“第二个日期选择器”，而第一个会消失。就像对我的 javascript 代码的更改一样，虽然 div 更新 :-)。
是否有办法确定表单上的日期选择器并在我的 fncAjaxClear 中将它们全部关闭，或者这会是一种“作弊”方式吗？
对不起；也许我还不清楚。我希望仅从图像中显示日期选择器，而不是在进入输入框时显示。如果我单击 wsFromDate 的图像，这应该加载日期选择器，但是在单击 wsToDate（不是图像）时，我希望隐藏 wsFromDate 日期选择器。

【解决方案2】：

将显示的属性更改为

showOn：“两者”

编辑：添加以下内容

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

【讨论】：

我希望仅从图像中显示日期选择器，而不是在输入框的输入时显示。如果我单击 wsFromDate 的图像，这应该加载日期选择器，但是在单击 wsToDate（不是图像）时，我希望隐藏 wsFromDate 日期选择器

【解决方案3】：

您可以添加此代码以打开，当您单击输入字段（wsFromDate 或 wsToDate）时，日期选择器会关闭另一个：

$('#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。

【讨论】：

试过这个，但是当我点击输入字段时它会导致日期选择器加载，但我只希望它在点击图像时显示。但是，它确实关闭了另一个日期选择器。
@Keith 现在我很明白你需要什么
@macgyver 使用后如何关闭日期选择器？
@Ayman 你是对的，我误解了基思在寻找什么。我认为只是 Keith 需要切换正确的日期选择器而不考虑如何在之后关闭它
link 请查看此链接。当我加载一个日期选择器，然后单击第三个输入框时，日期选择器关闭，无论它链接到哪个字段。我想实现此功能，但理想情况下，不必为每个日期选择器设置关闭事件。我希望能够自动实现这一点（通过 datepicker 中的一个选项），或者通过修改我的 fncAjaxClear 脚本来关闭表单上的所有 datepicker。