CODEWITHSUNDEEP
jquery
Mohammed Almamoun
Mohammed Almamoun

Reputation: 31

Datepicker and timepicker not working on appended elements

I'm using datepicker and timepicker for my fields like this:

<input class="datepicker" name="sugg_date[]" type="text" value="" />
<input class="tp" name="sugg_time[]" type="text" value="" />

I'm also using this function to add more rows: 

<script>
    function add_next_row(e, row_a) {
        curr_row = $(row_a).prev('p');
        curr_row.append('<input class="datepicker" name="sugg_date[]" type="text" value="" />');
        curr_row.append('<input class="tp" name="sugg_time[]" type="text" value="" />');

        if (e.preventDefault) {
            e.preventDefault();
        } else {
            e.returnValue = false;
        }
    }
</script>

But the new rows don't work with the timepicker and datepicker. Can someone please tell me why.

Upvotes: 2

Views: 2213

Answers (2)

Mohammed Almamoun
Mohammed Almamoun

Reputation: 31

    function add_next_row(e, row_a) {

    if (e.preventDefault) {
        e.preventDefault();
    } else {
        e.returnValue = false;
    }
    curr_row = $(row_a).prev('p');
    var $datefield = $('<input class="datepicker" name="sugg_date[]" type="text" value="" />').datepicker();
    var $timefield = $('<input class="timepickr" name="sugg_time[]" type="text" value="" />');
    curr_row.append($datefield);
    curr_row.append($timefield);
    curr_row.append("<br/>");


    $(".timepickr").timepickr().timepickr({convention:12});


}

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337626

You need to initialise the datepicker and timepicker for each new element you add. Try this:

function add_next_row(e, row_a) {
    e.preventDefault();

    var $datefield = $('<input class="datepicker" name="sugg_date[]" type="text" value="" />').datepicker();
    var $timefield = $('<input class="tp" name="sugg_time[]" type="text" value="" />').timepickr({convention:12}); 

    curr_row = $(row_a).prev('p');
    curr_row.append($datefield);
    curr_row.append($timefield);
}

Upvotes: 1

Related Questions