20

I am kind of stumped because, I want to format the value and add a html attribute for css class.

If I use @Html.TextBoxFor(m => m.DateModified) - I can add html attribute but formatting does not work via DisplayFormat attribute on the member.

If I use @Html.EditorFor(m => m.DateModified) - Formatting works but I cannot add html attribute

If I use @Html.TextBox("DateModified", Model.DateModified, ...) - I get null reference exception when Model is null when the form is in add mode

What is the best way to achieve this?

tereško
  • 58,060
  • 25
  • 98
  • 150
lahsrah
  • 9,013
  • 5
  • 37
  • 67
  • Thanks for this question, I was having little diff problem, but the explantion you gave in ur question helped me too. Did not know tht in EditoFor method, I can not give html attributes, and Model binding was working in lousy way in my case...thanks again. – Anand Feb 23 '12 at 10:28

5 Answers5

17

I ended up solving this by creating a custom editor template for my date picker as so:

Shared/EditorTemplates/DateTime.cshtml

 @model System.DateTime? 
 @Html.TextBox("", Model.HasValue ? Model.Value.ToString("dd/MM/yyyy") : string.Empty, new { @class = "date-picker" })

Then in my original page continue to use

@Html.EditorFor(m => m.DateModified)
lahsrah
  • 9,013
  • 5
  • 37
  • 67
  • 2
    Nice. Very helpful for me - I was getting frustrated by this. – itsmatt Aug 23 '11 at 20:40
  • The only modification I made for my own needs was adding `@readonly="readonly"` since I use the jQuery datetime picker - forces the user to pick a date rather than worrying about them typing in something goofy. Might not be applicable for everyone or every situation, but worked pretty good for me. – itsmatt Aug 23 '11 at 20:44
  • Although I did notice that the side-effect of my doing that is it makes it difficult to clear a date. I'll probably remove that bit since it complicates things. – itsmatt Aug 23 '11 at 20:46
  • How does this work if you want to pass arbitrary attributes through the EditorFor call? The only way I can see this getting done is by adding stuff to the `additionalViewData` argument, which seems hacky... – DMac the Destroyer Sep 01 '11 at 21:57
  • but [this](http://stackoverflow.com/a/13626569/2218697) one worked for me to get this dd/mm/yyyy format i used `date = string.Format("{0}/{1}/{2}", Model.Value.Day, Model.Value.Month, Model.Value.Year);` – Shaiju T Mar 30 '15 at 15:21
10

You could...

@Html.TextBoxFor(m => m.DateModified, new { Value = Model.DateModified.ToString("MM-dd-yyyy"), @class = "superCoolClassName"})
driis
  • 161,458
  • 45
  • 265
  • 341
ctorx
  • 6,841
  • 8
  • 39
  • 53
  • 7
    Thank you for this. I have found that the first property of the anonymous type "value" should in fact start with an uppercase V, (i.e. "Value"), otherwise it did not have an affect. – Tahir Hassan Jan 12 '12 at 09:32
  • Just so you know, adding a Value (with uppercase V) produces both a value and a Value attribute which is invalid when you check your markup with the W3.org validator. – Anton Jun 19 '13 at 08:28
3

Use @Html.EditorFor(m => m.DateModified), because otherwise the DisplayFormat attribute will have no effect.

To add further attributes like a CSS class, you have to create an editor template for the DateTime. Create a file EditorTemplates/DateTime.cshtml with the following content:

@Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, new
{
    @class="date"
})

Please note that the value of the TextBox is not set with the Model directly, but rather with the TemplateInfo.FormattedModelValue, because that value will be formatted according to the DisplayFormat attribute while the Model not. (This took me quite some time to realize. :))

In simple cases this might be enough, e.g. if the CSS class can be the same for all date editors.

If you want to parametrize the attribute, you can do that as well, passing the attribute value parameter to the EditorFor.

@Html.EditorFor(m => m.DateModified, new { @class = "someClass" })

However, this parameter will be not automagically delegated to the HTML control as attribute, but you have to "handle it" in the template explicitly. According to my experiences you can access this parameter value in the ViewData in the template, so the parametrized template looks like this:

@Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, new
    {
        @class=ViewData["class"]
    })
Tz_
  • 2,949
  • 18
  • 13
1

To prevent hardcoding the key/value pairs listed in EditorFor , convert the ViewData object to a Dictionary and pass that dictionary object to TextBox.

eg

    @Html.EditorFor(m => m.DateModified, "Template", new { @class = "someClass", size=8 , htmlTag="custom" }) 

And in the template you have

    @Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, ViewData.ToDictionary(c=>c.Key,c=>.Value))
scarter
  • 11
  • 1
0

To show json date in textbox (cshtml):

var d1 = ui.item.IssueDate;
var d = new Date(parseInt(d1.slice(6, -2)));
var Issdate = ("0" + (d.getMonth() + 1)).slice(-2) + '/' + 
              ("0" + d.getDate()).slice(-2) + '/' + 
              d.getFullYear().toString();
$('#IssueDate').val(Issdate);
Uwe Keim
  • 39,551
  • 56
  • 175
  • 291
Mahesh
  • 1