2

動的に作成された入力フィールドのdatepickerについてサポートが必要です...

私はこのフォームを持っています：

    <table id="reminder">
                 <tr>
                 <th>Payment Reminders</th> 
                 <th></th>
                 <th></th>
                 <th></th>
                 </tr>
                 <tr>
                    <td><label>Reminder</label></td>                              
                    <td><input type="text" name="payreminder[]" id="payreminder" class="input1" size="20" ><script>$('#payreminder').datepicker({dateFormat: $.datepicker.W3C, changeMonth: true, changeYear: true, yearRange: '2011:2020'}); </script></td> 
                    <td><label>Description</label></td>
                    <td><input type="text" class="input1" name="paydescription[]" id="paydescription"></td>
                    <td> <a href="#" onClick="addReminder('dynamicInputReminder');" title="Add another">Add another</a></td>
                 </tr>
                  <tr>
                   <td colspan="6"><div id="dynamicInputReminder"></div> </td> 

                </tr>


        </table>

さらにリマインダーを追加するためのJavaScriptは次のとおりです。

<script type="text/javascript" >

 var counterReminder = 1;
 var limit = 20;              
  function addReminder(divName){ 
     if (counterReminder == limit)  {
      alert("You have reached the limit of adding " + counterReminder+ " inputs");
      }
      else {
      var newdiv = document.createElement('div');
      newdiv.innerHTML = "<td><label>Reminder</label></td><td><input type=\"text\"  id=\"payreminder["+counterReminder+"]\" name=\"payreminder["+counterReminder+"]\" class=\"input1\" ></td><td><label>Description</label></td><td><input type=\"text\" id=\"paydescription["+counterReminder+"]\" name=\"paydescription["+counterReminder+"]\" class=\"input1\"></td>";
      document.getElementById(divName).appendChild(newdiv);
      counterReminder++;
 } 
}
</script>

問題は、動的に作成されたフィールドで機能するように、日付ピッカーの次のスクリプトをどこでどのように呼び出すことができるかということです。

<script>$('#payreminder').datepicker({dateFormat: $.datepicker.W3C, changeMonth: true, changeYear: true, yearRange: '2011:2020'}); </script>

どうもありがとう！

4

6 に答える 6

7

たとえば、入力フィールドにIDの代わりにクラスを使用します

<input type=\"text\"  id=\"payreminder["+counterReminder+"]\" name=\"payreminder["+counterReminder+"]\" class=\"payreminder\" >

<script>
    $(document).on('focusin', '.payreminder', function(){
      $(this).datepicker({dateFormat: $.datepicker.W3C, changeMonth: true, changeYear: true, yearRange: '2011:2020'});
    });
</script>
于 2013-03-01T10:25:45.053 に答える
1

これを試して

スクリプトを削除し、これをコードの最後に配置します。

注：idは常に一意である必要があるため、ここではクラスを使用しました。

IDをクラス「payreminder」に変更します。

$(document).find('.payreminder').datepicker({dateFormat: $.datepicker.W3C, changeMonth: true, changeYear: true, yearRange: '2011:2020'});
于 2013-03-01T10:24:19.803 に答える
0

datepickerを追加する各入力フィールドにdateという名前のクラスを追加します。これで、新しいフィールドを追加するたびに、次の関数を呼び出します。

$(".date").datepicker();
于 2013-03-01T10:27:58.043 に答える
0

これを試して：

<script type="text/javascript" >

 var counterReminder = 1;
 var limit = 20;              
 function addReminder(divName) { 
     if (counterReminder == limit)  {
         alert("You have reached the limit of adding " + counterReminder+ " inputs");
     } else {
         var newdiv = document.createElement('div');
         newdiv.innerHTML = "<td><label>Reminder</label></td><td><input type=\"text\"  id=\"payreminder["+counterReminder+"]\" name=\"payreminder["+counterReminder+"]\" class=\"input1\" ></td><td><label>Description</label></td><td><input type=\"text\" id=\"paydescription["+counterReminder+"]\" name=\"paydescription["+counterReminder+"]\" class=\"input1\"></td>";
         document.getElementById(divName).appendChild(newdiv);
         $(newDiv).find('input').datepicker({dateFormat: $.datepicker.W3C, changeMonth: true, changeYear:  true, yearRange: '2011:2020'});
         counterReminder++;
     } 
}
</script>
于 2013-03-01T10:19:02.507 に答える
0 
$(document).on('focusin', 'input[id^=payreminder]', function(){
  $(this).datepicker({dateFormat: $.datepicker.W3C, changeMonth: true, changeYear: true, yearRange: '2011:2020'});
});
于 2013-03-01T10:19:17.867 に答える