MVC3 & Razor - Change DateTime String from "mm/dd/yyyy 12:00:00 AM" to "mm/dd/yyy" in a Textbox

Question

I am trying to stop the Time from showing up in a Birthday Text Field that uses DateTime

My Code: (I'm using the Jquery DatePicker)

<label for="birthday">Birthday:</label>
            @Html.TextBox("birthday", (Model.Birthday.ToString()), new { @class = "datePicker" })

The Javascript:

$(document).ready(function () {
    $('.datePicker').datepicker({ showOn: 'both', buttonImage: "/content/images/calendar-red.gif" });
});

I have the Model setup for the date:

[DataType(DataType.Date)]
public DateTime? Birthday { get; set; }

Still the Text in the Text box displays:

"8/21/2010 12:00:00 AM"

I want Text in the Textbox to diplay as just:

"8/21/2010"

I have tried everything from:

@inherits System.Web.Mvc.WebViewPage<System.DateTime>

but wont let me do that since I am @using a model

Turaco

Answer 1

I would use an editor template and data annotations on the view model to specify formatting which makes the views much cleaner:

[DataType(DataType.Date)]
[DisplayName("Birthday:")]
[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
public DateTime? Birthday { get; set; }

and then inside your view:

<span class="datePicker">
    @Html.LabelFor(x => x.Birthday)
    @Html.EditorFor(x => x.Birthday)
</span>

and then adapt the selector because the textbox will no longer have the datePicker class:

$('.datePicker :text').datepicker({ 
    showOn: 'both', 
    buttonImage: "/content/images/calendar-red.gif" 
});

Cannabis

You can also use #Birthday as a selector, afaik the Editor output will add an id with the property name. – Reste

@Filip, yes #Birthday could work but I don't like magic strings in the views because if I rename this property on my view model or I use this editor template somewhere deeper in the object hierarchy the id might also change to something like #Root_Sub_Birthday. – Cannabis

you are absolutely right. I think this is a much better approach. I just pointed out that It is Possible. – Reste

very handy, thank you, just one question; what is the purpose of having an annotation that specifies the data type when it also forms part of the declaration? [DataType(DataType.Date)] and public DateTime? – Amitosis

Answer 2

Try changing to this:

@Html.TextBox("birthday", (Model.Birthday.Value.ToShortDateString()), new { @class = "datePicker" })

Since your DateTime is Nullable you need to do .Value before you can access the DateTime methods.

When calling ToString on a DateTime it will give you Date + Time. So Instead of calling ToString you want to use either ToString with formatting or ToShortDateString.

MSDN has the following to say about ToShortDateString

The string returned by the ToShortDateString method is culture-sensitive. It reflects the pattern defined by the current culture's DateTimeFormatInfo object. For example, for the en-US culture, the standard short date pattern is "M/d/yyyy"; for the de-DE culture, it is "dd.MM.yyyy"; for the ja-JP culture, it is "yyyy/M/d". The specific format string on a particular computer can also be customized so that it differs from the standard short date format string.

Reste

Answer 3

I was actually running into this problem with Razor using MVC 3. I ended up having to create a DateTime Partial Class in Shared/EditorTemplates to get the attributes I needed.
Previously my view was: @Html.TextBoxWithAttributesFor(m => m.To, new { @class = "text-box", @readonly = "readonly" }) but this kept given me the TimeStamp. Even when I tried .Value.DateTime or any other work around. But my current, working solution is:

view:

@Html.EditorFor(m => m.To)

partial class:

@model System.DateTime
@Html.TextBox("", (Model.ToShortDateString()), new { @class = "text-box", @readonly = "readonly" })

I used this page as a second source: http://buildstarted.com/2010/09/10/overriding-displayfor-and-editorfor-to-create-custom-outputs-for-mvc/

Near

Answer 4

Where you have "Model.Birthday.ToString()" you need to replace it with "Model.Birthday.ToShortDateString()"

Joni

What happened when you did? In which case, have you tried .ToString("MMddyyyy") – Joni

This does not seem to work with VB.NET. I get an error "Conversion from string "MMddyyy" to type integer is not valid. The weird thing is that it works fine with C# – Rhythmical