Jquery 将DateTime选择器添加到TextBoxFor字段-MVC 5/Bootstrap 3

我不熟悉引导，正在尝试向我的文本框字段添加日期时间选择器

我现在正在使用一个表进行格式化，所以我不能使用大多数示例，因为它们使用div标记，所以我尝试将其粘贴到th/tr标记中，我甚至不确定这是否可行

我正在尝试实现此日期时间选择器：

并把它写进这段代码：我迄今为止的尝试

 @model WebApplication2.Entities.Employee

@{
    ViewBag.Title = "Edit";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<br />
<br />
<br />
<br />
<div class="panel panel-primary" style="width: 400px">
    <div class="panel-heading">
        <span style="font-size: 30px; font-style:oblique">Editing for: @Html.DisplayFor(model => model.Name)</span>
    </div>
    <table class="table table-striped table-hover table-responsive">

        @using (Html.BeginForm())
        {
            @Html.AntiForgeryToken()
            @Html.ValidationSummary(true)
            @Html.HiddenFor(model => model.ID)

            <tr>
                <th class="col-lg-3">
                    @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2 col-md-offset-1" })
                </th>
                <th class="col-lg-9">
                    @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.Name)
                </th>
            </tr>
            <tr>
                <th class="col-lg-3">
                    @Html.LabelFor(model => model.Birthday, new { @class = "control-label col-md-2 col-md-offset-1" })
                </th>
                <th class="col-lg-9" id="datetimepicker1">
                    @Html.TextBoxFor(model => model.Birthday, new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.Birthday)
                    @*WITH ADD-ON TO THE ICON...*@
                    <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
            </tr>
        }
        <tr>
            <td class="col-lg-6">
                <button type="submit" value="Save" class="btn btn-success col-lg-11">Save</button>
            </td>
            <td class="col-lg-6">
                <button type="button" class="btn btn-warning col-lg-11 col-lg-offset-1" onclick="location.href='@Url.Action("Index")';return false;">Home</button>
            </td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    $(function () {
        $('#datetimepicker1').datetimepicker({
            language: 'pt-BR'
        });
    });
</script>

表格的外观

另一方面，如何正确转换原始保存

<input type="submit" value="Save" class="btn btn-default" />

到按钮，如我在上面的尝试

<button type="submit" value="Save" class="btn btn-success col-lg-11">Save</button>

谢谢大家!

答案

我从datepicker下载并添加了以下文件：

一个.js和一个.css文件 使用此日期选择器为每个TextBoxFor或任何其他输入添加ID

在我的视图底部添加JS脚本，一切都像一个魔咒一样工作

例如textbox

JS脚本在视图的底部，我有两个类和id都使用它

<script type="text/javascript">
    $('#datepicker').datepicker();
    $('.datepicker').datepicker();
</script>

---

为什么需要使用表而不是div？无论如何，如果你想让你的提交按钮。。。提交表单单击时，表单应位于必须提交的表单内。否则，您必须使用javascript:$form.submit；那么我应该把它作为一种形式来做？我还能得到类似的DIV布局和设计吗？对不起，我没有看到你发布的图片。答案是：当然。再长一点就是永远不要将表格用作布局。总是使用div+css，在bootstrap的情况下非常容易做到，非常简单和快速。好的！从不将表格用于布局，这是仅用于表单还是信息布局？也就是说，我的索引使用一个表布局来显示所有数据，可以吗？表是用来作为一个表使用的。如果要显示数据，请选择正确的HTML元素。然而，如果你想像你正在做的那样布局一个网页，它是完全不正确的。不管你想把东西放在右边还是左边，这都是布局，应该用CSS来完成。

<script type="text/javascript">
    $('#datepicker').datepicker();
    $('.datepicker').datepicker();
</script>