Can't create multiple datepicker using jquery

Question

I have a problem. I have a dynamic form that can generate a rows of textfields and these textfields are should be datepicker. These textfields have same classes but only the first one has a datepicker. The rest can't generate a datepicker. But when I checked their classes they have the class of datepicker.

Here's my simple code:

function addNewRowCheck() {

        check_html = '<tbody id="check-row' + check_row + '">';
            check_html += '<tr style="background-color: #FDCACB">';
                check_html += '<td class="txt-center"><input type="hidden" name="check[' + check_row + '][order_no]" value="' + check_row + '" /></td>';
                check_html += '<td>';
                    check_html += '<select>';
                        check_html += $select_account_type;
                    check_html += '</select>';
                check_html +- '</td>';
                check_html += '<td><input type="text" class="txt-center chkdate" name="check[' + check_row + '][curr]" /></td>';
                check_html += '<td><input type="text" class="txt-right" name="check[' + check_row + '][rate]" /></td>';
                check_html += '<td><input type="text" class="txt-right" name="check[' + check_row + '][amount]" /></td>';
                check_html += '<td><input type="text" class="txt-right" name="check[' + check_row + '][check_number]" /></td>';
                check_html += '<td><input type="text" class="txt-right chkdate" name="check[' + check_row + '][check_date]" /></td>';
                check_html += '<td><input type="text" class="txt-right" name="check[' + check_row + '][bank_name]" /></td>';
                check_html += '<td class="center"><img id="remove_btn" src="<?php echo $button_remove; ?>" onclick="$(\'#check-row' + check_row + '\').remove()" style="display: inline;" /></td>';
            check_html += '<tr>';
        check_html += '</tbody>';

        $('#check-content tfoot').before(check_html);

        check_row++;

}

....

$('.chkdate').each(function() {
    $(this).datepicker({
        dateFormat: 'yy-mm-dd',
        changeMonth: true,
        changeYear: true
    });
});

After adding a new row, you have to set it manually to let it be a datepicker. Your code only initializes the already there to be datepicker, not the dynamically added ones. — devqon
– devqon, Commented Oct 14, 2014 at 7:01
there is no event delegation kind of way to handle plugin initialization... you need to do it after the new element is created... so var $new = $(check_html).insertBefore('#check-content tfoot'); $new.find('.chkdate').datepicker({ dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true }); — Arun P Johny
– Arun P Johny, Commented Oct 14, 2014 at 7:06

Cubed Eye · Accepted Answer · 2014-10-14 08:05:17Z

1

* you start jquery click function*

$("input[type=text]").click(function() {

    $(this).datepicker({
        dateFormat: 'yy-mm-dd',
        changeMonth: true,
        changeYear: true
    });
});

edited Oct 14, 2014 at 8:05

Cubed Eye

5,6314 gold badges53 silver badges66 bronze badges

answered Oct 14, 2014 at 7:42

Qamar Aftab

621 silver badge5 bronze badges

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

Collectives™ on Stack Overflow

Can't create multiple datepicker using jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related