css - Unable to use Datepicker in a table when inserting a row

admin管理员组

文章数量:1387360

Here is the html code for which the datepicker works-

    <div class="container">
    <div class="row">
        <div class='col-sm-4'>
            <form>
                <div class="form-group">
                    <div class='input-group date pickadate'>
                        <input type='text' class="form-control" />
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

The function for datepicker:-

    //Script for claendar 
$(function() {
        $('.pickadate').datepicker({
            format: "dd/mm/yyyy",
            autoclose: true,
            todayHighlight: true,
            showOtherMonths: true,
            selectOtherMonths: true,
            autoclose: true,
            changeMonth: true,
            changeYear: true,
            orientation: "button"
        });
    });

The function for inserting a new row:-

//Inserting new row
$(document).on('click', '.btn_new_row', function(event) 
{
    event.preventDefault();
    //create a random id
    var row_id = Math.random().toString(36).substr(2);

    var user_id = <?php echo $user_id; ?>

    //get table rows
    var tbl_row = $(document).find('.tbl_code_with_mark').find('tr');    
    var tbl = '';
    tbl +='<tr row_id="'+row_id+'", user_id="'+user_id+'">';
        tbl +='<td><div class="pickadate new_row_data date editinfo" contenteditable="true" edit_type="click" col_name="date"><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div></td>';
        tbl +='<td ><div class="new_row_data purpose editinfo" contenteditable="true" edit_type="click" col_name="purpose"></div></td>';
        tbl +='<td ><div class="new_row_data category editinfo" contenteditable="true" edit_type="click" col_name="category"></div></td>';
        tbl +='<td ><div class="new_row_data sum editinfo" contenteditable="true" edit_type="click" col_name="sum"></div></td>';

        //--->edit options > start
        tbl +='<td>';            
            tbl +='  <a href="#" class="btn btn-link btn_new" row_id="'+row_id+'" > Add Entry</a>   | ';
            tbl +='  <a href="#" class="btn btn-link btn_remove_new_entry" row_id="'+row_id+'"> Remove</a> ';
        tbl +='</td>';
        //--->edit options > end    

    tbl +='</tr>';
    tbl_row.first().after(tbl);

    $(document).find('.tbl_code_with_mark').find('tr').first().find('.purpose').focus();

});

The datepicker does not seem to work for the date fields in the table. I've tried almost everything but nothing seems to work. Please help!

Here is the link of the video from which I took up the base code.

本文标签： cssUnable to use Datepicker in a table when inserting a row