Using Persian Datetimepicker in MVC4

Question

I am trying to use a persian datetimepicker inside my project .I am using MVC4.

So i found a link http://stackoverflow.com/questions/16248909/persian-calender-in-mvc-asp-net and i decided to implement this .

I added some css and js file to my project as you can see here (i added to my layout page):

<link href="@Url.Content("~/Content/js-persian-cal.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/js-persian-cal.min.js")"></script>

So i created a model as you can see here :

 namespace MvcApplication2.Models
{
    public class DTpicker
    {
         public string name { set;get;}
         public DateTime datetime { set; get; }
    }
}

I create a view create view as you can see here :

@model MvcApplication2.Models.DTpicker

@{
    ViewBag.Title = "create";
}

<h2>create</h2>
<script type="text/javascript">
        var objCal1 = new AMIB.persianCalendar('pcal1'); </script>
@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>DTpicker</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.name)
            @Html.ValidationMessageFor(model => model.name)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.datetime)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.datetime, new { @id = "pcal1", @class = "pdate" })
            @Html.ValidationMessageFor(model => model.datetime)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}


@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

As you can see i added some extra code to my datetime as you can see here :

 @Html.EditorFor(model => model.datetime, new { @id = "pcal1", @class = "pdate" })

I added this part of code to the create view as you saw above :

  <script type="text/javascript">
            var objCal1 = new AMIB.persianCalendar('pcal1'); </script>

So but where is the problem ,when i run my application the datetimepicker doesn't work .I saw the view source of the page using browser and my datetime input have a syntax like this :

   <div class="editor-label">
            <label for="datetime">datetime</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line" data-val="true" data-val-date="The field datetime must be a date." data-val-required="The datetime field is required." id="datetime" name="datetime" type="datetime" value="" />
            <span class="field-validation-valid" data-valmsg-for="datetime" data-valmsg-replace="true"></span>
        </div>

As you know the id should be pcal1 but as you can see the id is id="datetime" why ?

best regards .

any ideas will be appreciated

Answer 1

EditorFor doesn't support passing HTML attributes. So the object you're passing isn't doing anything. (Actually, it is doing something just not what you expect. It will set keys in ViewData with those values, e.g. ViewData["id"] = "pcal1".) The id is being set to datetime because that's the name of the property you're creating an editor for.

So, you have two options:

1. Don't use EditorFor but something like TextBoxFor instead. That will allow you pass HTML attributes to be rendered on the input:

   @Html.TextBoxFor(model => model.datetime, new { type="datetime", @id = "pcal1", @class = "pdate" })
   

2. Create a editor template to be used for DateTime properties:

   Views\Shared\EditorTemplates\DateTime.cshtml

   @{
       var htmlAttributes = HtmlHelper.AnonymousObjectToHtmlAttributes(ViewData["htmlAttributes"] ?? new {});
       htmlAttributes["type"] = "datetime";
       htmlAttributes["class"] = htmlAttributes["class"] == null
                                     ? "pdate"
                                     : "pdate " + htmlAttributes["class"];
   }
   
   @Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, htmlAttributes)
   

   Then in your view:

   @Html.EditorFor(model => model.datetime, new { htmlAttributes = new { id = "pcal1" } })
   

   Notice that the pdate class is being added by the template, so you don't have to pass it manually. I'm assuming this is what your JavaScript attaches to, so you'd want this class to always be present on inputs for DateTime properties. Also, note the syntax for the EditorFor call. Instead of passing an anonymous object consisting of id, you need to pass one consisting of htmlAttributes, which then itself has an id. This is because, again, EditorFor just sets the values in ViewData.