Javascript 在模式中初始化引导数据选择器

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

我正在为开始日期和结束日期使用引导日期选择器，它们已在索引视图中初始化，但当我单击开始日期和结束日期文本框时，它不会以模式形式显示。有什么问题

索引视图：

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

编辑视图

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

&时代；
编辑计时器
比率
@EditorFor（model=>model.Rate，new{htmlAttributes=new{@class=“form control”}）
开始日期
@EditorFor（model=>model.StartDate，new{htmlAttributes=new{@class=“form control date”，@readonly=“readonly”}）
结束日期
@EditorFor（model=>model.EndDate，new{htmlAttributes=new{@class=“form control date”，@readonly=“readonly”}）
接近
保存更改

呈现视图时，

StartDate

和

EndDate

的控件不存在（

$（.date”）。日期选择器（{..

不执行任何操作，因为没有带有

class=“date”的控件）

。你需要在创建模式时附加插件。@StephenMuecke我明白了，但我不清楚你指的插件。日期选择器插件-你需要执行

$（“.date”）。日期选择器（{..

在带有

class=“.date”

的控件之后添加到DOM中（在

$.get（..

调用中）好的，我明白了，我会试试看，谢谢你指导我

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>