javascript - Bootstrap-datetimepicker - 动态添加显示在错误的区域

Question

通过ajax写入数据库后。我的成功函数。构建一个元素并将其附加到表中。然后，将其附加到表后，它会在新附加的行上调用日期时间选择器。然而，日期时间选择器(日历)显示在完全奇怪的地方。请参阅屏幕截图。

我应该提到的一件事是，这些注释位于一个选项卡 Pane 中，看起来像

请参阅下面的 View 和 JavaScript

查看:

<div class="panel-body">
    @if (session('status'))
        <div class="alert alert-success">
            {{ session('status') }}
        </div>
    @endif
    <ul  class="nav nav-pills">
            <li class="active">
                <a  href="#cdetails" data-toggle="tab">Details</a>
            </li>
            <li>
                <a href="#Quotes" data-toggle="tab">Quotes</a>
            </li>
            <li>
                <a href="#Notes" data-toggle="tab">Notes</a>
            </li>
            <li>
                <a href="#Documents" data-toggle="tab">Documents</a>
            </li>
        </ul>
    <div class="tab-content">
        <div id="cdetails" class="tab-pane active">
            <table class="table ">
                <thead>
                </thead>
                <tbody>
                    <tr ><td colspan="4"></td></tr>

                    <tr><td><b>Code</b></td><td colspan="3">{{$item->code}}</td></tr>
                    <tr><td><b>Name</b></td><td colspan="3">{{$item->name}}</td></tr>
                    <tr><td><b>Customer</b></td><td colspan="3">{{$item->customer->company}}</td></tr>
                    <tr><td><b>Contract Type</b></td><td colspan="3">{{$item->contype}}</td></tr>
                    <tr><td><b>Contract Amount</b></td><td colspan="3">{{$item->contractAmount}}</td></tr>
                    <tr><td><b>Hourly Rate</b></td><td colspan="3">{{$item->rate}}</td></tr>
                </tbody>
            </table>
            @if(1 == 2)
                <h3>Phases <button class="btn btn-sm btn-primary pull-right" href="#assigntemplate" data-toggle="modal" >Assign a Template</button></h3><hr />
                <table class="table">
                    <thead>
                        <tr>
                            <th>Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($item->phases as $p)
                            <tr>
                                <td>{{$p->name}}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @endif
        </div><!-- end details tab -->
        <div id="Quotes" class="tab-pane">

        </div><!-- end of quotes tab -->
        <div id="Notes" class="tab-pane">
            <table class="table">
                <thead>
                    <tr >
                        <th class="">Date</th>
                        <th class="col-md-8">Note</th>
                        <th class="">Action</th>
                    </tr>
                </thead>
                <tbody id="noteListTBody">
                <button href="#addNote" data-toggle="modal" class="btn btn-info pull-right" style="color:white; margin:20px 8px 0 0; position:relative; top:-50px; padding:3px; width:30px; height:30x;"><span class="glyphicon glyphicon-plus"></span></button>
                    @foreach($item->notes as $note)
                        <tr data-id="{{$note->id}}">
                            <td><input type="text" class="form-control dpick" name="date" disabled value="{{Carbon\Carbon::parse($note->date)->format('m/d/Y')}}" ></td>
                            <td><textarea type="text" class="form-control dnote"  name="note" disabled>{{$note->note}}</textarea></td>
                            <td>
                                <button class="btn btn-danger pull-right btnDeleteNote" href="#noteDelete" data-toggle="modal"><span class="glyphicon glyphicon-trash"></span></button>
                                <button class="btn btn-primary pull-right btnEditNote"><span class="glyphicon glyphicon-pencil"></span></button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div><!-- end of notes tab -->
    </div>

JavaScript

$.ajax({
        type: 'POST',
        url: "/api/notes",
        data: {
            '_token'        : ajaxtoken,
            'item_id'       : itemID,
            'item_type'     : itemType,
            'user_id'       : userID,
            'date'          : dateValue,
            'note'          : noteValue


        },
        success: function(result) {
            console.log(result);
            // noteListTBody
            var noteRow = `
                <tr data-id="`+result.item_id+`">
                    <td><input type="text" class="form-control dpick" name="date" disabled value="`+dateObject+`" ></td>
                    <td><textarea type="text" class="form-control"  name="note" disabled>`+noteValue+`</textarea></td>
                    <td>
                        <button class="btn btn-danger pull-right btnDeleteNote" href="#noteDelete" data-toggle="modal"><span class="glyphicon glyphicon-trash"></span></button>
                        <button class="btn btn-primary pull-right btnEditNote" ><span class="glyphicon glyphicon-pencil"></span></button>
                    </td>
                </tr>
            `;

            $('#noteListTBody').append(noteRow);

            $('.btnCloseModal').click();
            $('#noteListTBody tr[data-id="'+result.item_id+'"]').find('.dpick').datetimepicker({format: 'MM/DD/YYYY'});

        }
    });

Answer 1

所以我不知道确切的事实。这可能是两个可能的原因之一。

1. datetimepicker - 需要一个 div 包装器来实现目标相对定位
2. datetimepicker - 需要一个输入组 div 包装器来实现目标相对定位

无论哪种方式。我使用了他们网站上的以下代码。

<div class='input-group date' id='datetimepicker1'>
    <input type='text' class="form-control" />
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

一旦我这样做了。并将日期选择器从直接定位输入移动到定位其周围的组(div)，它在相对定位中完美工作。