.NET Development Examined

Improved MVC Date Template

Friday, March 16, 2012

This will be a short and simple post dealing with an improvement on the traditional display and editor templates normally found for MVC date display. If you are not familiar with the issue, normally a DateTime field will display the full information, including the time. Commonly this is not the desired display, we only want the date part. While you can format the display on each view, that becomes cumbersome, and it is easy to miss one. MVC has a great solution for that, called DisplayTemplates. Located in the \Views\Shared\DisplayTemplates folder they will apply to that data type site wide. So creating a DateTime.cshtml file here will be used for the display anytime the @Html.DisplayFor helper is used (the same is applied for the @Html.EditorFor and the EditorTemplates folder).

Commonly the contents of the DateTime.cshtml file is simple:

@model System.DateTime @string.Format("{0:d}", Model)

This partial view simply formats the DateTime values using the ShortDate pattern. Simply create the file, and you are ready to do… But what if the field is initialized, but has no value? I recently had a case where the field was not null, but contained the default date of 01/01/0001. Obviously this was not the desired display. Continue on to find out the simply solution.

And the great reveal………

@model System.DateTime @{ var value = string.Empty; if (Model != DateTime.MinValue) { value = Model.ToShortDateString(); } } @value

Hopefully this is not too much of a letdown (remember I said it was simple post). We simply initialize are return value to an empty string, then only if the Model value is not the minimum date time value do we assign the date to our return value.

Now this will result in a blank date display, which is what I wanted. You could easily return “no date”, or whatever you wanted to display for blank dates.

The template for the Editor is a little more involved, but runs along the same lines. My normal Editor template is:

@model System.DateTime? @Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() : string.Empty), new { @class = "datePicker" })

You can find this same template anywhere on the net, I did and you may notice I am applying a class of “datePicker” which I use for the popular jQueryUI calendar. Again this works great, until you have the minimum date value. So lets bump it up a bit…

@model System.DateTime? @{ var value = string.Empty; if(Model.HasValue ) { if(Model.Value != DateTime.MinValue) {value = Model.Value.ToShortDateString();} } var Id = string.Empty; if (ViewData["id"] != null) {Id = ViewData["id"].ToString();} } @Html.TextBox("", (value), new { @class = "datePicker", Id })

The @Html.EditorFor does a little bit more, but is not that complicated. Like the display template we are checking the value for the DateTime.MinValue, but we are also looking to see if an id string is being passed. Normally the @Html.EditorFor will ignore an id if passed as part of the additional data, but by parsing the ViewData this allows you to assign a specific id to the resulting date picker text box - nice bonus wouldn't you say?

So, that's really if for this post. It's a minor improvement that can make your site look much better.


Add Comment