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

Question

我是新来的bootstrap并尝试在我的文本框字段中添加DateTime选择器。

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

我正在尝试实施此DateTime选择器：http://tarruda.github.io/bootstrap-datetimepicker/

并将其放入此代码:(我迄今为止的尝试）

 @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>

谢谢！

Answer 1

<强> ANSWER

1. 我在这里下载并添加了datepicker中的文件：http://www.eyecon.ro/bootstrap-datepicker/

   • （一个.js和一个.css文件）

2. 为每个TextBoxFor（或使用此日期选择器的任何其他输入）添加了一个ID

3. 在我的视图底部添加JS脚本，它就像一个魅力！ ：）

TextBoxFor示例

@Html.TextBoxFor(modelItem => item.Birthday, new { @class = "datepicker" })

View底部的JS脚本（我有使用它的类和id）

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