php - 动态输入字段上的jquery datepicker

Question

我需要有关动态创建的输入字段的日期选择器的帮助...

我有这个表格：

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

非常感谢！

score 7 · Accepted Answer

例如，为您的输入字段使用类而不是 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>

score 1 · Accepted Answer

试试这个

删除您的脚本并将其放在代码的末尾。

注意： id 应该始终是唯一的，所以我在这里使用了 class。

将您的 ID 更改为“payreminder”类。

$(document).find('.payreminder').datepicker({dateFormat: $.datepicker.W3C, changeMonth: true, changeYear: true, yearRange: '2011:2020'});

score 0 · Accepted Answer

试试这个：

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

score 0 · Accepted Answer

$(document).on('focusin', 'input[id^=payreminder]', function(){
  $(this).datepicker({dateFormat: $.datepicker.W3C, changeMonth: true, changeYear: true, yearRange: '2011:2020'});
});

score 0 · Accepted Answer

在要添加日期选择器的每个输入字段上添加一个名为 date 的类，现在每次添加新字段时，调用以下函数

$(".date").datepicker();

score 0 · Accepted Answer

或者，您可以为每个输入使用data-属性而不是类。以下<input type="text" data-datepicker ...>在页面加载后立即初始化任何datepicker标签，然后可以在添加新提醒后再次调用。

function initDatePicker () {
    $("input[data-datepicker]").datepicker();
};
$(document).ready(initDatePicker());

此外，我发现<input>每次重新初始化它们时为所有 datepicker 调用 destroy() 方法很有用；否则，它们似乎会破裂。我使用了以下内容：

function addReminder(divName){
    ...
    $("input[data-datepicker]").datepicker('destroy');
    initDatePicker();
    ...
};

显然，请确保在调用datepicker('destroy') 之前先调用initDatePicker()，否则每次添加新提醒时都会清除所有日期选择器。

jQueryUI 日期选择器销毁方法

php - 动态输入字段上的jquery datepicker

6 回答 6

Related

Reference