jQuery - Cloning a datepicker field

Question

I'm trying to clone a table row and get a datepicker box working on all rows. At the moment, the first one works, but not later boxes.

Can anyone offer any tips? Any help much appreciated!

Here's the code:

HTML

<link rel="stylesheet" type="text/css" href="http://brenda.upreach.org.uk/plugins/jquery.datepick.package-4.1.0/redmond.datepick.css"> 

    <script type="text/javascript" src="http://brenda.upreach.org.uk/plugins/jquery.datepick.package-4.1.0/jquery.datepick.js">  </script>

    <div class="clone_Associate">
<input type="text" name="DATE_SET[]" class="datepick" value="04/12/2013">

    </div>

    <div class="placer_Associate"></div>

        <a href="#" class="clone_trigger_Associate">Clone a new datebox!</a>

jQuery

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



$(document).ready(function(){
          $(".clone_trigger_Associate").click(function () {
              var total = $('[name^="UPDATE_METHOD"]').length;
              var index = Math.round(total / 2);
              $('.clone_Associate').last().clone().insertBefore(".placer_Associate");
              $('input.cl:last').val('');
              $('.clone_Associate').last().find("input[type='checkbox']").prop("name","UPDATE_METHOD["+index+"][]")

              // Date pick element
              $('.datepick').datepick({ 
                    dateFormat: 'dd/mm/yyyy', showTrigger: '#calImg'}
              );
              event.preventDefault();  
            });
        });

A jsfiddle is here: http://jsfiddle.net/dalepotter/aSG6e/

See this http://stackoverflow.com/questions/2441061/problem-when-cloning-jquery-ui-datepicker — Aamir Afridi, Dec 04 '13 at 14:59

Aamir Afridi · Accepted Answer · 2013-12-04T15:42:24.203

1

Demo: http://jsfiddle.net/aSG6e/15/

$(function() {

 var options = {dateFormat: 'dd/mm/yy'}

 $('.datepick').datepicker(options);

 $(".clone_trigger_Associate").click(function (e) {
    e.preventDefault();
    var $newInput = $('.datepick:last').clone(true).removeAttr('id');
    $(this).before($newInput);
    $newInput.datepicker('destroy').datepicker(options);
 });
});

edited Dec 04 '13 at 15:42

answered Dec 04 '13 at 15:08

Aamir Afridi

6,364
3
42
42

Thanks so much for this @Aamir Afridi This is definitely progress, although the date shows as '04/12/20132013' when selecting a new data via the datepicker... Also, for cloned fields, the date is always shown in the first/top field. Do you know if there would be a way to fix these problems? Thanks again for your help :-) – user2761030 Dec 04 '13 at 15:17
OK, thanks for your help... It's strange that it doesn't seem to work - do you think there are any other options? Will await your thoughts! – user2761030 Dec 04 '13 at 15:28
Check the demo. Remove its id works. Datepicker will give it a unique id. Otherwise it will reuse same id. – Aamir Afridi Dec 04 '13 at 15:44
This looks great - many thanks for this! I am now integrating this into my longer code to check it works there too! Thanks a lot :-) – user2761030 Dec 04 '13 at 16:04
[continue this discussion in chat](http://chat.stackoverflow.com/rooms/42511/discussion-between-aamir-afridi-and-user2761030) – Aamir Afridi Dec 04 '13 at 16:05

score 0 · Answer 2 · answered Dec 04 '13 at 15:19

0

Change this code;

$('.clone_Associate').last().clone().insertBefore(".placer_Associate");

with this;

var newDate = '<div class="clone_Associate"><input type="text" name="DATE_SET[]" class="datepick" value="04/12/2013"></div>';
$('.clone_Associate:last').after(newDate);

answered Dec 04 '13 at 15:19

BerAenT

1

Many thanks for this @BerAenT The real code contains at least 50 lines in the `clone_Associate` class. Do you know if there is any way to change this so that the whole of the .clone_Associate box is selected, rather than using a variable...? – user2761030 Dec 04 '13 at 15:30

jQuery - Cloning a datepicker field

2 Answers2