重复字段的jquery日期选择器

Question

我知道这个问题以前已经被问过了，但我似乎无法得到以前的答案，因为我的代码有点不同。

所以我有一个重复字段，我正在尝试使用datepicker。第一个实例工作正常，但如果我添加一行，日期选择器将显示在屏幕的另一部分上，并且单击时不会将任何信息输入到字段中。

这里是我的代码：

<script> 
jQuery(document).ready(function($) { 
    $('.metabox_submit').click(function(e) { 
     e.preventDefault(); 
     $('#publish').click(); 
    }); 
    $('#add-row').on('click', function() { 
     var row = $('.empty-row.screen-reader-text').clone(true); 
     row.removeClass('empty-row screen-reader-text'); 
     row.insertBefore('#repeatable-fieldset-one tbody>tr:last'); 
     return false; 
    }); 
    $('.remove-row').on('click', function() { 
     $(this).parents('tr').remove(); 
     return false; 
    }); 
    $('#repeatable-fieldset-one tbody').sortable({ 
     opacity: 0.6, 
     revert: true, 
     cursor: 'move', 
     handle: '.sort' 
    }); 

    $('.session-time').timepicker({ 
     'minTime': '8:00am', 
     'maxTime': '10:0pm', 
     'step': 15, 
    }); 

    $('.session-date').each(function() { 
     $(this).datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     dateFormat: 'mm-dd-yy', 
     yearRange: '2017:2020' 
     }); 
    }); 
}); 
</script> 

}); 
</script> 
<div class="wrap"> 
<table id="repeatable-fieldset-one" class="form-table"> 
    <thead> 
     <tr> 
      <th>Remove</th> 
      <th>Session Date</th> 
      <th>Session Time</th> 
      <th>Sort</th> 
     </tr> 
    </thead> 
    <tbody> 

    <?php 
    if ($repeatable_fields) : 
     foreach ($repeatable_fields as $field) : // there are complete fields 
    ?> 
     <tr> 
      <td><a class="button remove-row" href="#">-</a></td> 
      <td><input type="text" class="session-date" name="session_date[]" value="<?php if($field['session_date'] != '') echo esc_attr($field['session_date']); ?>" /></td> 
      <td><input type="text" class="session-time" name="session_time[]" value="<?php if($field['session_time'] != '') echo esc_attr($field['session_time']); ?>" /></td> 
      <td><a class="sort">|||</a></td> 
     </tr> 


    <?php endforeach; 
     else : // show a blank one ?> 

     <tr> 
      <td><a class="button remove-row" href="#">-</a></td> 
      <td><input type="text" class="session-date" name="session_date[]" /></td> 
      <td><input type="text" class="session-time" name="session_time[]" /></td> 
      <td><a class="sort">|||</a></td> 
     </tr> 

    <?php endif; ?> 
    <!-- empty hidden one for jQuery --> 

     <tr class="empty-row screen-reader-text"> 
      <td><a class="button remove-row" href="#">-</a></td> 
      <td><input type="text" class="session-date" name="session_date[]" /></td> 
      <td><input type="text" class="session-time" name="session_time[]" /></td> 
      <td><a class="sort">|||</a></td> 
     </tr> 
    </tbody> 
</table> 

<p><a id="add-row" class="button" href="#">Add another</a></p> 
</div> 

Answer 1

对于其他人谁降临在这个问题上，这里是为我工作的修补程序。我能够为datapicker获得这项工作，但不能用于timepicker。

$(document).on('focus', '.session-date', function() { 
    $(this).datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     dateFormat: 'mm-dd-yy', 
     yearRange: '2017:2020 
    }); 
}); 

只需使用代码代替

$('.session-date').each(function() { 
    $(this).datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     dateFormat: 'mm-dd-yy', 
     yearRange: '2017:2020' 
    }); 
});