twitter-bootstrap - ブートストラップの datetimepicker の位置が間違っています

Question

次のhtmlを生成しました

<form action="/Home/UpdateMeetingWithId" method="post">
   <input name="__RequestVerificationToken" type="hidden" value="P-Ijqa8mk1lgxnRGypuf84s6p76pktsoZvTVHrvyc7MXCUMw8vvLUOfjJ-qfV-JrtaY_GpFDfjUKCbR2Qkjt_Q0i21WHK13cc7gSu-64qYfbMIlZnqZBI7nvbD3UNcIDZwaxkTHRFA9KMzJDJpfaWw2" />                
   <table class="table">
      <thead>
         <tr>
            <td>Start time</td>
            <td>End time</td>
            <td>Notify host by</td>
            <td>Reason</td>
            <td>Actions</td>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Fri 05 Aug 2016 14:00</td>
            <td>Fri 05 Aug 2016 15:00</td>
            <td>
               SMS
            </td>
            <td>sdfsd</td>
            <td nowrap>
               <a class="btn btn-default" href="/Home/ReinviteVisitor?meetingIdToEdit=7&amp;visitorId=00000000-0000-0000-0000-000000000000&amp;email=sdfs%40asdf.com">Edit</a>
               <a class="btn btn-default" href="/Home/DeleteMeetingWithId?meetingId=7" onclick="return confirm(&#39;Are you sure you wish to delete this meeting?&#39;);">Delete</a>
            </td>
         </tr>
         <tr>
            <td nowrap>
               <input class="form-control datetimepicker" data-val="true" data-val-date="The field Start Time must be a date." data-val-required="The Start Time field is required." id="MeetingToEdit_StartTime" name="MeetingToEdit.StartTime" type="text" value="05/08/2016 14:20" />
               <span class="field-validation-valid text-danger" data-valmsg-for="MeetingToEdit.StartTime" data-valmsg-replace="true"></span>
            </td>
            <td nowrap>
               <input class="form-control datetimepicker" data-val="true" data-val-date="The field End Time must be a date." data-val-required="The End Time field is required." id="MeetingToEdit_EndTime" name="MeetingToEdit.EndTime" type="text" value="05/08/2016 15:30" />
               <span class="field-validation-valid text-danger" data-valmsg-for="MeetingToEdit.EndTime" data-valmsg-replace="true"></span>
            </td>
            <td>
               <select class="form-control" data-val="true" data-val-required="The On visitor arrival field is required." id="MeetingToEdit_HostNotificationMethod" name="MeetingToEdit.HostNotificationMethod">
                  <option selected="selected" value="SMS">SMS</option>
                  <option value="CALL">CALL</option>
               </select>
            </td>
            <td>
               <input class="form-control" data-val="true" data-val-required="The Reason for invitation field is required." id="MeetingToEdit_Title" name="MeetingToEdit.Title" type="text" value="sdfds" />
               <span class="field-validation-valid text-danger" data-valmsg-for="MeetingToEdit.Title" data-valmsg-replace="true"></span>
            </td>
            <td nowrap>
               <input data-val="true" data-val-number="The field Id must be a number." data-val-required="The Id field is required." id="MeetingToEdit_Id" name="MeetingToEdit.Id" type="hidden" value="4" />
               <input id="MeetingToEdit_SubjectId" name="MeetingToEdit.SubjectId" type="hidden" value="00000000-0000-0000-0000-000000000000" />
               <input data-val="true" data-val-required="The FirstName field is required." id="MeetingToEdit_FirstName" name="MeetingToEdit.FirstName" type="hidden" value="sdf" />
               <input data-val="true" data-val-required="The LastName field is required." id="MeetingToEdit_LastName" name="MeetingToEdit.LastName" type="hidden" value="sdf" />
               <input data-val="true" data-val-required="The Email field is required." id="MeetingToEdit_Email" name="MeetingToEdit.Email" type="hidden" value="sdfs@asdf.com" />
               <input id="MeetingToEdit_Company" name="MeetingToEdit.Company" type="hidden" value="dsf" />
               <input id="MeetingToEdit_HostFirstName" name="MeetingToEdit.HostFirstName" type="hidden" value="neee" />
               <input id="MeetingToEdit_HostLastName" name="MeetingToEdit.HostLastName" type="hidden" value="Admin" />
               <input id="MeetingToEdit_HostEmail" name="MeetingToEdit.HostEmail" type="hidden" value="admin@admin.com" />
               <input id="MeetingToEdit_HostMobile" name="MeetingToEdit.HostMobile" type="hidden" value="+61400000014" />
               <a class="btn btn-default" href="/Home/ReinviteVisitor?visitorId=00000000-0000-0000-0000-000000000000&amp;email=sdfs%40asdf.com">Cancel</a>
               <input type="submit" class="btn btn-default" value="Update" />
            </td>
         </tr>
      </tbody>
   </table>
</form>

しかし、datetimepicker の位置が間違っています。以下のスクリーンショットを参照してください。

テーブルに行が増えると、さらに悪化します。datetimepicker のテキスト ボックスが下にあるほど、datetimepicker が高くなります。奇妙な問題です。ここで何が起こっているか分かりますか?

更新：コメントによると、これは私が持っているものですが、まだ機能していません

$("#meetingstable").on("click", "td", function () {
        $("#MeetingToEdit_StartTime").datetimepicker({ widgetParent: this });
});

また、MeetingToEdit_StartTime と MeetingToEdit_EndTime の 2 つの datetimepicker を処理するために上記を変更する方法は、クリックされたセルによって異なります。