JQuery - Клонированный календарь датпикера не отображается рядом с полем datepicker

Я создал клонированный элемент datepicker (с помощью @Aamir Afridi), и теперь я пытаюсь создать календарь с клонированным полем datepicker.

Я создал здесь jsfiddle, чтобы проиллюстрировать проблему: http://jsfiddle.net/dalepotter/xTvfx/3/

В календаре отображается поле для элементов, которые загружаются со страницы, но не правильно помещается для клонированных полей. У кого-нибудь есть указатели на то, как это исправить?

Большое спасибо за любую помощь, которую вы можете дать...

Здесь код:

HTML

<h2>Action points</h2>

<table>
<tbody><tr><td valign="top">

 <h3>For the Associate</h3>


 <div>

 <table>


 <tbody><tr><td>
 Date set:</td><td>
 
 </td></tr>


 <tr><td>
 Date due for completion:</td><td>
 
 </td></tr>





 </tbody></table>

 <!-- End clone_Associate -->
 </div>
 
 <p><a href="#" target="_blank">Add another action step for the Associate</a>   </p>


</td><td valign="top">


 <h3>For us</h3>


 <div>

 <table>


 <tbody><tr><td>
 Date set:</td><td>
 
 </td></tr>


 <tr><td>
 Date due for completion:</td><td>
 
 </td></tr>






 </tbody></table>
 <!-- End clone_upReach -->
 </div>

 
 <p><a href="#" target="_blank">Add another action step for upReach</a>   </p>

</td></tr> 
</tbody></table>

JQuery

$('.datepick').datepick({ 
 dateFormat: 'dd/mm/yyyy', showTrigger: '#calImg'});


 // Start code for duplicating a div box
 $(document).ready(function(){
 // Set datepicker options
 var options = {dateFormat: 'dd/mm/yy'}

 $(".clone_trigger_Associate").click(function () {
 // Prevent default link action
 event.preventDefault();

 $('input.cl:last').val('');
 var $newInput = $('.clone_Associate:last').clone(true).removeAttr('id');
 $(this).before($newInput);

 // Calculate correct number for the checkbox array
 var total = $('[name^="UPDATE_METHOD"]').length;
 var index = Math.round(total / 2) - 1;
 $('.clone_Associate').last().find("input[type='checkbox']").prop("name","UPDATE_METHOD["+index+"][]");

 // Reinitialise the datepicker
 $newInput.datepicker('destroy').datepicker(options);
 });
 });


 $(document).ready(function(){
 // Set datepicker options
 var options = {dateFormat: 'dd/mm/yy', showTrigger: '#calImg'}

 $(".clone_trigger_upReach").click(function () {
 // Prevent default link action
 event.preventDefault();

 $('input.cl:last').val('');
 var $newInput = $('.clone_upReach:last').clone(true).removeAttr('id');
 $(this).before($newInput);

 // Reinitialise the datepicker
 $newInput.datepicker('destroy').datepicker(options);
 });
 });

 // End code for duplicating a div box
1 ответ

У вас было две проблемы:

  1. typo - .datepicker() вместо .datepick()
  2. $newInput.datepicker('destroy').datepicker(options);

должно быть

$newInput.find('.datepick').datepick('destroy').datepick(options);

потому что вы должны присоединить datepicker к входам, а не к клонированному div.

http://jsfiddle.net/xTvfx/4/

licensed under cc by-sa 3.0 with attribution.