在Modal中初始化Bootstrap DatePicker

Question

我在ASP.NET MVC中有一个带有编辑按钮的计时器列表。单击编辑按钮时，将显示模式窗体。在模态形式中，我们应该填写费率，开始日期和结束日期。

我使用bootstrap datepicker作为开始日期和结束日期，这些是在Index View中初始化的，但是当我点击开始日期和结束日期文本框时，它不会以模态形式显示。有什么问题？

索引视图：

<div id="timeKeeperList">
    @{ Html.RenderPartial("_IndexList", Model.TimeKeepers); }
</div>

<!-- Modal -->
<div class="modal fade" id="timeKeeperModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div id="timeKeeperContainer"></div>
        </div>
    </div>
</div>

@section Scripts {
    <script type="text/javascript" src="~/Scripts/bootstrap-datepicker.js"></script>
    <script>
        $(document).ready(function () {
            $("#timeKeeperList").on("click", ".modalTimeKeeper", function (e) {
                e.preventDefault();
                var url = $(this).attr("href");
                $.get(url, function (data) {
                    $("#timeKeeperContainer").html(data);
                    $("#timeKeeperModal").modal(show = true, backdrop = false);
                });
            });

            $(".date").datepicker({
                format: "dd/mm/yyyy",
                todayBtn: "linked",
                autoclose: true,
                todayHighlight: true
            });
        });

        function editTimeKeeperComplete(data) {
            $("#timeKeeperModal").modal("hide");
        }
    </script>
}

IndexList查看：

<div class="table-responsive">
    <table class="table table-striped table-hover table-condensed">
        <tr>
            <th></th>
            <th>No</th>
            <th>Name</th>
            <th>Rate</th>
            <th>Start Date</th>
            <th>End Date</th>
        </tr>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    <a href="@Url.Action("Edit", new { id = item.TimeKeeperID })" class="modalTimeKeeper">
                        <span class="glyphicon glyphicon-pencil"></span>
                    </a>
                </td>
                <td>@Html.DisplayFor(modelItem => item.TimeKeeperNo)</td>
                <td>@Html.DisplayFor(modelItem => item.Name)</td>
                <td>@Html.DisplayFor(modelItem => item.Rate)</td>
                <td>@Html.DisplayFor(modelItem => item.StartDate)</td>
                <td>@Html.DisplayFor(modelItem => item.EndDate)</td>
            </tr>
        }
    </table>
</div>

控制器：

public ActionResult Edit(int? id)
{
    TimeKeeper timeKeeper = db.TimeKeepers.Find(id);
    TimeKeeperViewModel timeKeeperVM = new TimeKeeperViewModel()
    {
        TimeKeeperID = timeKeeper.TimeKeeperID,
        Name = timeKeeper.Name,
        EliteRate = timeKeeper.Rate,
        StartDate = timeKeeper.BillingStartDate,
        EndDate = timeKeeper.BillingEndDate,
    };

    return PartialView("_Edit", timeKeeperVM);
}

修改视图

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title" id="myModalLabel">Edit Timekeeper</h4>
</div>

<div class="modal-body">
    <div class="form-horizontal">
        <div class="form-group">
            <div class="col-md-4">
                <label for="EliteRate" class="control-label">Rate</label>
            </div>
            <div class="col-md-8">
                @Html.EditorFor(model => model.Rate, new { htmlAttributes = new { @class = "form-control" } })
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-4">
                <label for="StartDate" class="control-label">Start Date</label>
            </div>
            <div class="col-md-8">
                @Html.EditorFor(model => model.StartDate, new { htmlAttributes = new { @class = "form-control date", @readonly = "readonly" } })
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-4">
                <label for="EndDate" class="control-label">End Date</label>
            </div>
            <div class="col-md-8">
                @Html.EditorFor(model => model.EndDate, new { htmlAttributes = new { @class = "form-control date", @readonly = "readonly" } })
            </div>
        </div>
    </div>
</div>

<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal" id="btnClose">Close</button>
    <button type="submit" class="btn btn-primary" id="btnSave">Save changes</button>
</div>