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

Can't put an image inside a div properly

css angularjs

I'm working with Angular and trying to bind an image to a div background.

Moving from HttpClient to HttpUrlConnection

java android http-post httpurlconnection androidhttpclient

I had developed a android app with HttpClient with target API 19. In order to do some updates I updated target API 22. As soon as I did, I noticed that a ton of previous implementations are now

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.