Question

我试图在MVC应用程序中使用简单的日期选择器，并且只要其中一个输入字段的id以Date结尾，就需要调用datepicker。

从视图模型中选取字段名称，我希望尽可能少地添加附加信息（例如，我可以为每个输入添加不同的类，并为每个输入添加一个日期选择器，但似乎像矫枉过正）。

我可以创建一个元素数组，并可以通过它的索引调用每个元素。

var dateSelect = [];
$("[id$='Date']").each(function() {
    dateSelect.push('#' + $(this).attr('id'));
    console.log(dateSelect);
});

$(dateSelect[0]).datepicker({ format: "dd/mm/yyyy" });

如何在不知道数组中有多少个的情况下更改此项来为Date字段的每个实例调用datepicker？

e.g。 $(dateSelect[ANY]).datepicker({ format: "dd/mm/yyyy" });

我已尝试使用each和for loop，但只有在字段元素后面直接调用datepicker似乎才会出现。

为了清晰起见而编辑

从前几条评论来看，我可能不清楚为什么需要回答这个问题。

当我在具有多个日期字段的页面上调用datepicker时，对datepicker调用的任何操作（例如onChange）仅应用于第一个实例，无论哪个字段实际上是焦点。

我认为使用一系列字段元素可以简单地单独调用每个元素。我需要知道如何调用数组中未知数量的元素，例如：

$(dateSelect[ANY]).datepicker({ format: "dd/mm/yyyy" });

问题不在于如何将日期选择器附加到多个字段。

答案更新

以下代码有效。我遇到的原始问题是由于日期选择器有两个不同的样本显示不同的隐藏方法。出于某种原因，我试图使用的那个只附加到页面上日期字段的第一个实例。

$("[id$='DateInput']").datepicker({ format: "dd MM yyyy" }).focus(function() {
    $(this).on('changeDate', function () {
        $(this).datepicker('hide');
        })
});

Answer 1

您不需要迭代..如果您在集合上调用.datepicker()，它将应用于集合中的所有元素：

http://jsfiddle.net/z88KG/

$("[id$='Date']").datepicker();

Answer 2

为什么不在datepicker的每次迭代中创建each实例？

$("[id$='Date']").each(function() {
    $(this).datepicker({ format: "dd/mm/yyyy" });
});

Answer 3

如果您为所有这些输入添加一个类，例如.datepicker，您不需要为每个输入编写一个日期选择器的脚本，只需包含对您使用的类的一个引用。

$(function(){ $(".datepicker").datepicker(); });

Example Fiddle

为JQuery datepicker迭代多个相同类型的元素

为了清晰起见而编辑

答案更新

3 个答案: