dongshi1424
2015-08-27 11:43
浏览 40

无法在表中的克隆行上获取日期选择器

I was trying to get date picker on clone rows in the table.But it is not happening

my table code as follows:

 <input type="text" class="form-control dp4 dob4" autocomplete="off"  name="date[]" required>
 <input type="button" class="btn btn-default addButton" value="Add" />

and javascript for clone row as follows:

 $(function() {
                $("#table-data").on('click', 'input.addButton', function() {
                    var $tr = $(this).closest('tr');
                    var allTrs = $tr.closest('table').find('tr');
                    var lastTr = allTrs[allTrs.length - 1];
                    var $clone = $(lastTr).clone();
                    $clone.find('td').each(function() {
                        var el = $(this).find(':first-child');
                        var id = el.attr('id') || null;
                        if (id) {
                            var i = id.substr(id.length - 1);
                            var prefix = id.substr(0, (id.length - 1));
                            el.attr('id', prefix + (+i + 1));
                            el.attr('name', prefix + (+i + 1));
                        }
                    });
                    $clone.find('input:text').val('');
                    $tr.closest('table').append($clone);
                });

                $("#table-data").on('change', 'select', function() {
                    var val = $(this).val();
                    $(this).closest('tr').find('input:text').val(val);
                });
            });

and my date picker code as follows:

$('.dob4').datepicker({
                    format: 'dd-mm-yyyy',
                    startDate: '-0m',
                    autoclose: true

                });

Please help to solve this issue.

Thanks.

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • douxunnian0423 2015-08-27 12:20
    已采纳

    There is workaround to it,

    How it Works:

    • Need to remove the class hasDatepickerfrom the cloned elements,because this is what is preventing the datepicker from getting attached to the specific element.
    • Need to remove the id attribute from each of the cloned elements else .datepicker() will assume that datepicker is added to this element.

    • After that call .datepicker() on cloned element.

    JS Code:

     $("#table-data").on('click', 'input.addButton', function () {
         ...
        $clone.find('.dob4').removeAttr('id').removeClass('hasDatepicker');
        $clone.find('.dob4').datepicker({
             format: 'dd-mm-yyyy',
             startDate: '-0m',
             autoclose: true
         });
       ...
     });
    

    Live Demo @ JSFiddle

    已采纳该答案
    打赏 评论

相关推荐 更多相似问题