ASP.NET MVC 5: Datepicker in EditorTemplate error, cannot show multiple times

I have an EditorTemplate for DateTime, where I am using JQueryUI's datepicker. When I have multiple dates to be edited, only the first datepicker will show.

Versions:

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

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

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

../Views/Shared/_Layout.cshtml - script:

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

The view where I'm trying to edit:

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

As said, only the first one is working. I cannot find anything on google that helps me. Hope you can.

Answers


This is happening because you have the same id for StartDateTime and EndDateTime. Please see more about select an item using an id or class

Since IDs are unique, this expression always selects either zero or one elements depending upon whether or not an element with the specified ID exists.

To solve this you have to use a class, because you can select more than 1 element.

Your code will change in something like this:

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

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

../Views/Shared/_Layout.cshtml - script:

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

Need Your Help

How can I stop my PHP from spamming the error.log with PHP Notice?

php mysql

I'm currently working on a project where I need to get some data from 3 different tables out of a database and echo them so I can work with the results in jQuery.

Generating PDF Symfony2 IoTcpdfBundle

pdf symfony

I'm generating pdf file with IoTcpdfBundle using Symfony2, but there's a strange behaviour that I don't understand.