jquery datepicker 多个实例答案

【问题标题】：jquery datepicker multiple instancesjquery datepicker 多个实例
【发布时间】：2010-10-31 22:15:40
【问题描述】：

我已经制作了一个 RequestForQuote 表单，我可以在其中添加新职位以获取 RFQ。

在我的例子中，通过 PHP 很容易做到这一点。工作真的很好。你可能想看看。可在以下地址找到：my website

现在我感染了 jquery-virus，只是想添加 datepicker ui（对于我从他们的网页上获得的最新版本）。

<input type="text" size="10" id="deldate[] 
     class="datepicker" value="<?php echo $_REQUEST['deldate'][$k]; ?>" />

$k 来自 php for($k=0;$k<=$NoPos;$k++) 循环

javascript 代码工作如下：

$(function() {
$('input').filter('.datepicker').datepicker({
        showOn: 'button', 
        buttonImage: 'calender/media/cal.gif', 
        buttonImageOnly: true,
        firstDay: 1,
        dateFormat: 'yy-mm-dd', 
        minDate: 0, maxDate: '+4Y'});

});

在浏览器中看起来很不错，出现了用户界面，我无法选择日期。

但是……

如果我在表单中添加另一个位置，这是通过 PHP 完成的，所以我必须提交表单以计算 $NoPos，以前无效的日期会丢失并且我有一个空白输入字段。

现在有了 onSubmit: function(dateText)我可以得到选定的日期。但是我无法访问正确的输入字段来输入日期。

所以我的问题很简单：我做错了什么？如果一切都很好，那么有人会请告诉我如何解决这个问题..

我有这样的想法：

for (var i=0;i<=NoPos;i++) {
    var tag = "#deldate"+i;
    $(tag).datepicker({ ... });
}

并使用php<input type="text" size="10" id="lieferdat<?php echo $k; ?>" class="datepicker" />

非常感谢您耐心阅读本文...

非常感谢您提供的任何提示

干杯丹尼尔

【问题讨论】：

标签： jquery input datepicker field

【解决方案1】：

我自己也在寻找同样的东西，我想我找到了the trick： $('input').filter('.datepickerclass').datepicker()
以及相关的输入元素：
class="datepickerclass"

我在上面看到您尝试了类似的方法，但只是按照（该链接的）食谱对我有用。

【讨论】：

【解决方案2】：

我认为问题不在于日期选择器。 datepicker 只是用于在输入字段中填写日期，它不应该与提交给服务器的表单字段有任何关系。无论如何，无论您实际使用多少动态日期选择器，实际上只有一个日期选择器控件 (div) 放置在页面上。您可以发布该页面的相关生成 HTML 吗？

顺便说一句，看起来（至少在您的示例代码中）您缺少 id 上的引号。如果这是在实际代码中，那可能会导致您的问题。

编辑：根据您发布的示例（实际上应该通过编辑而不是作为答案添加到您的问题中），我看到了您的问题。您的输入没有名称参数。输入只有在有名称的情况下才会回发。

改变这个：

<input type="text" size="10"
       id="lieferdat<?php echo $k; ?>"
       class="datepicker" />

到这里：

<input type="text" size="10"
       id="lieferdat<?php echo $k; ?>"
       name="lieferdat<?php echo $k; ?>"
       class="datepicker" />

【讨论】：

我同意这不是 jquery 的“错误”，只是我在这方面的经验不足。我已经发布了 html 代码。再次感谢！
您是正确的，缺少 name 参数。我解决了这个问题，但没有改变。不过，只要我添加另一个 pos，即提交表单（使用 POST 或 GET），所有值都在那里，除了我输入的日期......
我昨天很累，所以我今天从头开始。结果：如果我使用诸如 $('#lieferdat').datepicker() 之类的直接指针，它可以正常工作。重新加载页面后日期保持不变。好吧，我可以去“放置” 20 个 id 并将 inut 限制在那个数字（通常客户不需要超过 10 个）。但是，我会更满意动态地做它。好吧，如果有一天我设法处理它，我会发布结果。再次感谢支持！！干杯，丹尼尔

【解决方案3】：

这可能有点晚了，但上面的所有建议都对我不起作用，我想出了一个简单的解决方案。

首先，是什么导致了问题： JQuery 将 datepicker 分配给元素 id。如果你正在克隆元素，那么同样的 id 也可能被克隆。哪个 jQuery 不喜欢。无论您单击哪个输入字段，您最终都可能会收到空引用错误或分配给第一个输入字段的日期。

解决方案：

1) 销毁日期选择器 2）为所有输入字段分配新的唯一ID 3) 为每个输入分配日期选择器

确保您的输入是这样的

<input type="text" name="ndate[]" id="date1" class="n1datepicker">

在克隆之前，销毁日期选择器

$('.n1datepicker').datepicker('destroy');

克隆后，也添加这些行

var i = 0;
$('.n1datepicker').each(function () {
    $(this).attr("id",'date' + i).datepicker();
    i++;
});

奇迹发生了

【讨论】：