Блог

когда я добавил datepicker к своим добавленным строкам. но средство выбора даты не работает. но это работает только сначала. когда я удаляю первый tr datepicker, оставшиеся добавленные строки, средство выбора даты работает

пожалуйста, смотрите Код ниже.

 $(function() {
    $( ".datepicker" ).datepicker({

         defaultDate: " 1w",
         changeMonth: true,
         maxDate: new Date(), 
         dateFormat: 'yy-mm-dd',
         numberOfMonths: 1,

    });  });

function addRow(tableID) {
        var table       = document.getElementById(tableID);
        var rowCount    = table.rows.length;
        var row         = table.insertRow(rowCount);
        var colCount    = table.rows[0].cells.length;

        for(var i=0; i<colCount; i  ) {

            var newcell = row.insertCell(i);
            newcell.innerHTML = table.rows[0].cells[i].innerHTML;
            switch(newcell.childNodes[0].type) {
                case "text":
                        newcell.childNodes[0].value = "";
                        break;
                case "checkbox":
                        newcell.childNodes[0].checked = false;
                        break;
                case "select-one":
                        newcell.childNodes[0].selectedIndex = 0;
                        break;
            }
        }
        var $row = $(row);
        $row.find('input.datepicker').datepicker({
             maxDate: new Date(), 
             dateFormat: 'yy-mm-dd',
        });

    }
  

html-код для вышеуказанного js

`

 <input type="button" class="btn btn-default" value="Add Row" onClick="addRow('add_row')"/>
 <table class="table table-bordered" id="adddeleterow">

                                <tbody id="add_row">
                                <tr>
                                <td><input class="form-control datepicker" type="text" name="date[]" id="date" placeholder="Date"/>
                                    </td>
                                    <td>
                                        <input class="form-control" type="text" name="hours[]" id="hours" placeholder="hours(hh:mm)"/>
                                    </td>
                                    <td><input type="button" class="btn btn-default" id="delPOIbutton" value="Delete" onClick="delete_check('add_row',this)" /></td>
                                    </tr>
                                </tbody>
                            </table>
  

`

Проблема была во второй строке.

Что у вас есть:

 $( ".datepicker" ).datepicker({
  

Это должно быть так.

 $(function() {
$(".datepicker").datepicker()({

  defaultDate: " 1w",
  changeMonth: true,
  maxDate: new Date(),
  dateFormat: 'yy-mm-dd',
  numberOfMonths: 1,

}); });
  

Кроме того, вам нужно привязать событие щелчка к addRow и переместить новую строку вверх в dom.

 $(".datepick").datepicker();
var newRowNum = 0;

// bind a click event to the "Add" link
$('#addnew').click(function() {

$(".datepick").datepicker("destroy");
  

Вы можете просмотреть больше здесь.
http://jsfiddle.net/norcaljohnny/hq2r9Lbq /