使用3個jQuery的日期選擇器3個不同的html格式在單個頁面

我在一個單獨的頁面中使用3個註冊表單，並提交所有3個表單的按鈕。在所有3種形式中都有一個日期欄。爲此，我使用JQuery日期選擇器。使用3個jQuery的日期選擇器3個不同的html格式在單個頁面

<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，但所有東西都不起作用，現在我無法更改日期選擇器，因爲我已經在數據庫中以及某些查詢中使用了它。

來源

2013-05-17 omnath

「Id」必須是唯一的，在所有日期輸入中使用'class =「inputField」'或對所有日期輸入使用不同的'ID'（如有必要）。 –

我已經嘗試過上課，但它顯示沒有效果..我也嘗試過不同的ID，但它不工作 – omnath

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

來源

2013-05-17 18:39:43 achairapart

是的，它的工作現在..感謝很多.. – omnath

當有許多輸入字段要匹配時，這似乎過於複雜。我會選擇一種方法來選擇通過調節性表達來代替：http://stackoverflow.com/a/16615853/457268 – k0pernikus

@ k0pernikus它實際上是*最簡單的方式*。在性能和效率方面，我只是通過自定義CSS類來查詢元素，而不是使用正則表達式來匹配所有輸入ID。 – achairapart

你的答案在這裏找到：

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

實際上你不能有兩個具有相同ID的元素，它是無效的。要麼改變您的代碼從一個類名稱工作，或改變的該ID的第二日期選擇輸入（例如到datafield2）和在JavaScript添加另一行：
new JsDatePick({ useMode:2, target:"datafield2", dateFormat:"%d-%M-%Y" }); 

來源

2013-05-17 18:41:46

代替使用類或手動實例化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+部分允許它被後面的任何數量和$標記字符串的結束。

來源

2013-06-17 19:23:42 k0pernikus

使用3個jQuery的日期選擇器3個不同的html格式在單個頁面

回答

相關問題