Jquery add input field and datepicker

Question

When I create input field with jquery datepicker do not work.

I try

$(function() {
$('.datepick').each(function(){
    $(this).datepicker();
});  
});

Jquery generated input:

<input name="date[]" class="pure-input-1-2 datepick" type="text" value="">

Jquery code generate input field

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div>'+
            'Iskustvo od:  <input  name="date[]" class="pure-input-1-2 datepick" type="text" value="">'+
            '<a href="#" class="remove_field">Remove</a></div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

Why not just write $('.datepick').datepicker(); ? If the input is generated Dynamically you need to initialise Datepicker again. — Shaunak D
– Shaunak D, Commented Mar 31, 2015 at 10:03

T.J. Crowder · Accepted Answer · 2015-03-31 10:53:32Z

3

Your code will attach a datepicker to any .datepick elements that are already in the document as of jQuery's ready "event," but it won't do anything to any elements added later.

If you add another element later, you'll need to explicitly attach the datepicker to it, presumably in the code where you added the element.

For instance, after adding the element, this code will attach a date picker to any .datepick that doesn't already have one:

$(".datepick").not(".hasDatepicker").datepicker();

The reason for the .not(".hasDatepicker") is that the datepicker adds that class to elements when it's been initialized on them, so by using .not, we filter out ones that are already set up rather than setting them up again.

Re your edit showing the code where you add the input, just add the call:

wrapper.append('<div>'+
'Iskustvo od:  <input  name="date[]" class="pure-input-1-2 datepick" type="text" value="">'+
'<a href="#" class="remove_field">Remove</a></div>'); //add input box
wrapper.find(".datepick").datepicker(); // <=====

Also note that I removed the $() from around wrapper; wrapper is already a jQuery object, no need to call $() again, much less repeatedly in a loop.

Or, again, just put the one-liner I gave earlier at the end of that code.

Side note: There's no reason for the each call in your code, just $(".datepick").datepicker(); will loop through them for you.

edited Mar 31, 2015 at 10:53

answered Mar 31, 2015 at 10:04

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Milind Anantwar Over a year ago

i mean the one you have used $(".datepick").not(".hasDatepicker").datepicker();. is this needed to be used when new element datepick is added .

T.J. Crowder Over a year ago

@MilindAnantwar: "is this needed to be used when new element datepick is added" Yes, that's why I say "For instance, after adding the element..." just above it.

BCM Over a year ago

Thank you. I added $(".datepick").datepicker(); in input generate code and working

Collectives™ on Stack Overflow

Jquery add input field and datepicker

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related