Question

我在一个页面中使用3个注册表单，其中包含所有3个表单的单独表单和提交按钮。在所有3种形式中都有一个日期列。为此，我使用的是JQuery日期选择器。

<script type="text/javascript">
    window.onload = function(){
        new JsDatePick({
            useMode:2,
            target:"inputField",
            dateFormat:"%d-%M-%Y"
        });
};
</script>

并在HTML表单字段中显示日期

<input type="text" size="12" name="date" id="inputField" />

现在，我想为所有表单应用这种类型的日期选择器，但是当我尝试时，只有1个日期选择器正在运行。我也尝试过更改字段ID，但所有内容都不起作用，现在我无法更改日期选择器，因为我已经在数据库和某些查询中完成了它的使用。

Answer 1

ID必须是唯一的，并且来自the documentation I found的日历脚本似乎不接受类，所以最简单的方法就是：

<script type="text/javascript">
window.onload = function(){
    new JsDatePick({
        useMode:2,
        target:"inputField1",
        dateFormat:"%d-%M-%Y"
    });
    new JsDatePick({
        useMode:2,
        target:"inputField2",
        dateFormat:"%d-%M-%Y"
    });
    new JsDatePick({
        useMode:2,
        target:"inputField3",
        dateFormat:"%d-%M-%Y"
    });
};

HTML：

<input type="text" size="12" name="date" id="inputField1" />
...
<input type="text" size="12" name="date" id="inputField2" />
...
<input type="text" size="12" name="date" id="inputField3" />

Answer 2

您的答案可以在这里找到：

https://stackoverflow.com/a/7486261/2394152

实际上你不能拥有两个具有相同ID的元素，它是无效的。将代码更改为可以从类名更改，或更改ID 第二个datepicker输入（例如，到datafield2）并添加另一行在你的javascript：
new JsDatePick({   useMode:2,   target:"datafield2",   dateFormat:"%d-%M-%Y" });

Answer 3

您可以使用JsDatePicker方法通过正则表达式选择匹配inputField的ID，而不是使用类或手动实现$.filter。

(function($, JsDatePick){
    var $inputFields = $("input").filter(function(){
        return this.id.match(/^inputField\d+$/);
    });

    $.each($inputFields, function(){
        new JsDatePick({
            useMode:2,
            target:this.id,
            dateFormat:"%d-%M-%Y"
        });
    });
})(jQuery, JsDatePick);

^标记字符串的开头，inputField来自您的ID，\d+部分允许后跟任意数字$标志着字符串的结尾。

在单页中使用3个不同的html表单中的3个jquery datepicker

3 个答案: