C# ASP.NET MVC 5:EditorTemplate中的日期选择器错误，无法显示多次

我有一个用于

DateTime

的

EditorTemplate

，其中我使用的是JQueryUI的

日期选择器。当我有多个日期要编辑时，只会显示第一个日期选择器

版本：

<package id="jQuery" version="2.1.3" targetFramework="net45" />
<package id="jQuery.UI.Combined" version="1.11.4" targetFramework="net45" />
<package id="Microsoft.AspNet.Mvc" version="5.2.2" targetFramework="net45" />

@model DateTime?
@Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() :
string.Empty), new
{
    @class = "form-control-static",
    @id = "datepick"
})

<script>
    $(function () {
        $("#datepick").datepicker({
            showWeek: true,
            firstDay: 1,
            monthNames: ["Januar", "Februar", "Marts", "April", "Maj", "Juni", "Juli", "August", "September", "Oktober", "November", "December"],
            dateFormat: "dd-mm-yy",
            changeYear: true
        });
    });
</script>

<div class="form-group">
    @Html.LabelFor(model => model.StartDateTime, new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.StartDateTime)
        @Html.ValidationMessageFor(model => model.StartDateTime, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.EndDateTime, new {@class = "control-label col-md-2"})
    <div class="col-md-10">
        @Html.EditorFor(model => model.EndDateTime)
        @Html.ValidationMessageFor(model => model.EndDateTime, "", new {@class = "text-danger"})
    </div>
</div>

@model DateTime?
@Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() :
string.Empty), new
{
    @class = "form-control-static datepick",
})

<script>
    $(function () {
        $(".datepick").datepicker({
            showWeek: true,
            firstDay: 1,
            monthNames: ["Januar", "Februar", "Marts", "April", "Maj", "Juni", "Juli", "August", "September", "Oktober", "November", "December"],
            dateFormat: "dd-mm-yy",
            changeYear: true
        });
    });
</script>

。/Views/Shared/_Layout.cshtml-脚本：

<package id="jQuery" version="2.1.3" targetFramework="net45" />
<package id="jQuery.UI.Combined" version="1.11.4" targetFramework="net45" />
<package id="Microsoft.AspNet.Mvc" version="5.2.2" targetFramework="net45" />

@model DateTime?
@Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() :
string.Empty), new
{
    @class = "form-control-static",
    @id = "datepick"
})

<script>
    $(function () {
        $("#datepick").datepicker({
            showWeek: true,
            firstDay: 1,
            monthNames: ["Januar", "Februar", "Marts", "April", "Maj", "Juni", "Juli", "August", "September", "Oktober", "November", "December"],
            dateFormat: "dd-mm-yy",
            changeYear: true
        });
    });
</script>

<div class="form-group">
    @Html.LabelFor(model => model.StartDateTime, new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.StartDateTime)
        @Html.ValidationMessageFor(model => model.StartDateTime, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.EndDateTime, new {@class = "control-label col-md-2"})
    <div class="col-md-10">
        @Html.EditorFor(model => model.EndDateTime)
        @Html.ValidationMessageFor(model => model.EndDateTime, "", new {@class = "text-danger"})
    </div>
</div>

@model DateTime?
@Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() :
string.Empty), new
{
    @class = "form-control-static datepick",
})

<script>
    $(function () {
        $(".datepick").datepicker({
            showWeek: true,
            firstDay: 1,
            monthNames: ["Januar", "Februar", "Marts", "April", "Maj", "Juni", "Juli", "August", "September", "Oktober", "November", "December"],
            dateFormat: "dd-mm-yy",
            changeYear: true
        });
    });
</script>


$（函数（）{
$（“#日期选取”）。日期选取器({
《秀周刊》：没错，
第一天：1，
月份：[“一月”、“二月”、“集市”、“四月”、“主要”、“六月”、“朱莉”、“八月”、“九月”、“奥克托伯”、“十一月”、“十二月”]，
日期格式：“dd-mm-yy”，
变化年：对
});
});

我试图编辑的视图：

<package id="jQuery" version="2.1.3" targetFramework="net45" />
<package id="jQuery.UI.Combined" version="1.11.4" targetFramework="net45" />
<package id="Microsoft.AspNet.Mvc" version="5.2.2" targetFramework="net45" />

@model DateTime?
@Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() :
string.Empty), new
{
    @class = "form-control-static",
    @id = "datepick"
})

<script>
    $(function () {
        $("#datepick").datepicker({
            showWeek: true,
            firstDay: 1,
            monthNames: ["Januar", "Februar", "Marts", "April", "Maj", "Juni", "Juli", "August", "September", "Oktober", "November", "December"],
            dateFormat: "dd-mm-yy",
            changeYear: true
        });
    });
</script>

<div class="form-group">
    @Html.LabelFor(model => model.StartDateTime, new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.StartDateTime)
        @Html.ValidationMessageFor(model => model.StartDateTime, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.EndDateTime, new {@class = "control-label col-md-2"})
    <div class="col-md-10">
        @Html.EditorFor(model => model.EndDateTime)
        @Html.ValidationMessageFor(model => model.EndDateTime, "", new {@class = "text-danger"})
    </div>
</div>

@model DateTime?
@Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() :
string.Empty), new
{
    @class = "form-control-static datepick",
})

<script>
    $(function () {
        $(".datepick").datepicker({
            showWeek: true,
            firstDay: 1,
            monthNames: ["Januar", "Februar", "Marts", "April", "Maj", "Juni", "Juli", "August", "September", "Oktober", "November", "December"],
            dateFormat: "dd-mm-yy",
            changeYear: true
        });
    });
</script>


@LabelFor（model=>model.StartDateTime，新的{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.StartDateTime）
@Html.ValidationMessageFor（model=>model.StartDateTime，“，new{@class=“text danger”}）
@LabelFor（model=>model.EndDateTime，新的{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.EndDateTime）
@Html.ValidationMessageFor（model=>model.EndDateTime，“，new{@class=“text danger”}）

如前所述，只有第一个有效。我在谷歌上找不到任何对我有帮助的东西。希望您可以。
发生这种情况是因为您对
StartDateTime
和
EndDateTime
具有相同的
id
。请查看更多关于

由于ID是唯一的，因此此表达式始终选择零个或一个元素，具体取决于是否存在具有指定ID的元素

要解决此问题，您必须使用
类
，因为您可以选择多个元素

您的代码将发生如下更改：

。/Views/Shared/EditorTemplates/DateTime.cshtml:

<package id="jQuery" version="2.1.3" targetFramework="net45" />
<package id="jQuery.UI.Combined" version="1.11.4" targetFramework="net45" />
<package id="Microsoft.AspNet.Mvc" version="5.2.2" targetFramework="net45" />

@model DateTime?
@Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() :
string.Empty), new
{
    @class = "form-control-static",
    @id = "datepick"
})

<script>
    $(function () {
        $("#datepick").datepicker({
            showWeek: true,
            firstDay: 1,
            monthNames: ["Januar", "Februar", "Marts", "April", "Maj", "Juni", "Juli", "August", "September", "Oktober", "November", "December"],
            dateFormat: "dd-mm-yy",
            changeYear: true
        });
    });
</script>

<div class="form-group">
    @Html.LabelFor(model => model.StartDateTime, new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.StartDateTime)
        @Html.ValidationMessageFor(model => model.StartDateTime, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.EndDateTime, new {@class = "control-label col-md-2"})
    <div class="col-md-10">
        @Html.EditorFor(model => model.EndDateTime)
        @Html.ValidationMessageFor(model => model.EndDateTime, "", new {@class = "text-danger"})
    </div>
</div>

@model DateTime?
@Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() :
string.Empty), new
{
    @class = "form-control-static datepick",
})

<script>
    $(function () {
        $(".datepick").datepicker({
            showWeek: true,
            firstDay: 1,
            monthNames: ["Januar", "Februar", "Marts", "April", "Maj", "Juni", "Juli", "August", "September", "Oktober", "November", "December"],
            dateFormat: "dd-mm-yy",
            changeYear: true
        });
    });
</script>

。/Views/Shared/_Layout.cshtml-脚本：

<package id="jQuery" version="2.1.3" targetFramework="net45" />
<package id="jQuery.UI.Combined" version="1.11.4" targetFramework="net45" />
<package id="Microsoft.AspNet.Mvc" version="5.2.2" targetFramework="net45" />

@model DateTime?
@Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() :
string.Empty), new
{
    @class = "form-control-static",
    @id = "datepick"
})

<script>
    $(function () {
        $("#datepick").datepicker({
            showWeek: true,
            firstDay: 1,
            monthNames: ["Januar", "Februar", "Marts", "April", "Maj", "Juni", "Juli", "August", "September", "Oktober", "November", "December"],
            dateFormat: "dd-mm-yy",
            changeYear: true
        });
    });
</script>

<div class="form-group">
    @Html.LabelFor(model => model.StartDateTime, new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.StartDateTime)
        @Html.ValidationMessageFor(model => model.StartDateTime, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.EndDateTime, new {@class = "control-label col-md-2"})
    <div class="col-md-10">
        @Html.EditorFor(model => model.EndDateTime)
        @Html.ValidationMessageFor(model => model.EndDateTime, "", new {@class = "text-danger"})
    </div>
</div>

@model DateTime?
@Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() :
string.Empty), new
{
    @class = "form-control-static datepick",
})

<script>
    $(function () {
        $(".datepick").datepicker({
            showWeek: true,
            firstDay: 1,
            monthNames: ["Januar", "Februar", "Marts", "April", "Maj", "Juni", "Juli", "August", "September", "Oktober", "November", "December"],
            dateFormat: "dd-mm-yy",
            changeYear: true
        });
    });
</script>


$（函数（）{
$（“.datepick”）.datepicker({
《秀周刊》：没错，
第一天：1，
月份：[“一月”、“二月”、“集市”、“四月”、“主要”、“六月”、“朱莉”、“八月”、“九月”、“奥克托伯”、“十一月”、“十二月”]，
日期格式：“dd-mm-yy”，
变化年：对
});
});
你需要给他们唯一的ID，它会选择第一个。尝试使用一个类。