CODEWITHSUNDEEP
jqueryjquery-ui-datepicker
user2525928
user2525928

Reputation: 23

How can I get jquery datepicker to work on cloned rows?

I have looked over many pages helping with the jquery datepicker not being functional on cloned rows, but I can't seem to translate any of the suggestions I found to my particular case. Here's the Fiddle link: http://jsfiddle.net/BE5Lr/2893/ Any advice would be appreciated.

$(function() {
  $( "#datepicker" ).datepicker();
});

var i = 1;
$("button").click(function() {
  $("table tr:first").clone().removeClass('hasDatepicker').find("input").each(function() {
    $(this).attr({
      'id': function(_, id) { return id + i },
      'name': function(_, name) { return name + i },
      'value': ''

    });
  }).end().appendTo("table");

  i++;

});

Upvotes: 2

Views: 1678

Answers (3)

Hardik Patil
Hardik Patil

Reputation: 554

How it Works:

Need to remove the class hasDatepickerfrom the cloned elements,because this is what is preventing the datepicker from getting attached to the specific element.

Need to remove the id attribute from each of the cloned elements else .datepicker() will assume that datepicker is added to this element.

After that call .datepicker() on cloned element.

newNode.find('.test').each(function() {
   $(this).removeAttr('id').removeClass('hasDatepicker');
   $(this).datepicker({dateFormat: 'dd-mm-yy', minDate: 0, autoclose: true,});
});

Upvotes: 0

cssyphus
cssyphus

Reputation: 40030

ClaudioZ had it almost right...

Adding a mydatepickers (or whatever name you choose) class is necessary.

But before you re-initialize the datepicker elements in the click event, you must first detach the datepicker fields before cloning the row (i.e. inside the click handler).

As Russell G explains in this answer, this is probably because the datepicker object thinks it has already been initialized throughout the DOM and aborts.

Finally, after cloning the row, you re-initialize them all.

See jsFiddle here

$(document).ready(function() {

    $(".mydatepickers").datepicker();

    //$( ".mydatepickers" ).datepicker();
    $( "input.mydatepickers" ).on('click', function() {
        //alert('hi'); 
        $(this).datepicker();
    });;

    var i = 1;
    $("button").on('click', function() {
        $('.mydatepickers').datepicker('destroy');
        myTr = $("table tr:first").clone().appendTo("table");
        myTr.removeClass('hasDatepicker').find("input").each(function() {
            $(this).attr({
                'id': function(_, id) { return id + i },
                'name': function(_, name) { return name + i },
                'value': ''
            });
        });
        //myTr.find('input[id^="datep"]').addClass("mydatepickers");
         $(".mydatepickers").datepicker();
        i++;
        alert('Current value of i is: ' + i);
    });

}); //END $(document).ready()

Upvotes: 2

ClaudioZ
ClaudioZ

Reputation: 27

Call $(...).datepicker() again in the click event.

Add a class "mydatepickers" to the input

$(".mydatepickers").datepicker();

Upvotes: 2

Related Questions