在3个不同的HTML表单中使用3个jquery datepicker - use 3 jquery datepicker in 3 differnet html form in single page

use 3 jquery datepicker in 3 differnet html form in single page

本文关键字：3个 datepicker jquery HTML 表单 | 更新日期: 2023-09-27

我在一个单独的页面上使用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" />

现在，我想为所有表单应用这种类型的日期选择器，但是当我尝试时，只有一个日期选择器在工作。我也尝试过改变字段id，但所有的东西都不起作用，现在我不能改变日期选择器，因为我已经在数据库和一些查询中使用了它。

id必须是唯一的，从我为日历脚本找到的文档来看，它似乎不接受类，所以最简单的方法是这样做:

<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" />

你的答案在这里:

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

你不能有两个元素具有相同的ID，这是无效的。的ID，或者更改代码以从类名开始工作第二个数据拾取器输入(例如datafield2)并添加另一行在你的javascript中:
new JsDatePick({   useMode:2,   target:"datafield2",   dateFormat:"%d-%M-%Y" });

除了使用类或手动实例化JsDatePicker之外，您还可以使用$.filter方法通过正则表达式选择匹配inputField的id。

(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+部分允许它后面跟着任何数字，$标志着字符串的结束。