我生成了以下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&visitorId=00000000-0000-0000-0000-000000000000&email=sdfs%40asdf.com">Edit</a>
<a class="btn btn-default" href="/Home/DeleteMeetingWithId?meetingId=7" onclick="return confirm('Are you sure you wish to delete this meeting?');">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&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 它们将取决于单击的单元格。