CODEWITHSUNDEEP
javascriptjqueryjquery-uidatepicker
jason drane
jason drane

Reputation: 25

Multiple datepickers on same form

Multiple datepickers on same form Check out my fiddle.

http://jsfiddle.net/83xzT/1/

I have the form adding additional lines as needed and I can get the date picker to work on the first input. However, my attempt to add an additional input to each using a count i and appending the instance name is not working.

any thoughts or suggestions would be appreciated.

Upvotes: 2

Views: 2815

Answers (4)

Trey Copeland
Trey Copeland

Reputation: 3527

Fixed. http://jsfiddle.net/83xzT/8/

    var i = 1;
$( "#datepicker" ).datepicker();

$('#add').click(function() {
    $('<div><span class="fieldset"><input type="text" name="date[]" class="field" id="datepicker' + i + '" value=""/> <select class="field" name="time[]"><option value="NULL">---Select Time ---</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select> <select class="field" name="timeframe[]"><option value="NULL">---Select A.M/P.M. ---</option><option value="am">A.M.</option><option value="pm">P.M.</option></select><input type="hidden" name="breaker[]" class="field" value=";"/></span></div>').fadeIn('slow').appendTo('.inputs');
        if(i >= 1) {
            $( "#datepicker" + i ).datepicker();
        }
    i++;
});

Upvotes: 0

Erin Kim
Erin Kim

Reputation: 71

Simple fix, just move 

$("#datepicker" + i).datepicker();

into the 

 $('#add').click(function() {
   ....
 }

block, right above the i++; Next is to get rid if your if/else blocks and just have it run 

 $("#datepicker").datepicker();

on document.ready.

Upvotes: 2

Rafael Martinez
Rafael Martinez

Reputation: 792

Just use a class instead of an id on the field:

<input type="text" name="date[]" class="field" class="datepicker" value=""/>

Then change your add function like this:

$('#add').click(function() {
    $('... html tags ...').appendTo('.inputs').fadeIn('slow', function() {
       $(".datepicker").datepicker();
    });
    i++;
});

Upvotes: 0

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

You just need to add $("#datepicker" + i).datepicker(); inside the click function

DEMO

Upvotes: 0

Related Questions