MVC DateTime Textbox Formatting Issue

Question

I would like to do something like

model.PickupDate.ToString("d")

But MVC4 is not liking that very much. PickupDate is a DateTime field and I would like to strip off the time portion when displayed in the view, while keeping the new { id = "date1" } code which binds the TextBoxFor to the javasript datepicker. How can I display the Date portion only in this instance?

@Html.TextBoxFor(model => model.PickupDate, new { id = "date1" })

score 30 · Accepted Answer · answered Jul 26 '13 at 12:53

this is how I would do this. Hope it helps

 @Html.TextBoxFor(m => m.MyDateTime, new { Value = Model.MyDateTime.ToString("MM-dd-yyyy"), id = "MySuperCoolId"});

or in your case

@Html.TextBoxFor(m => m.PickupDated, new { Value = Model.PickupDate.ToString("d"), id = "date1"});

score 28 · Answer 2 · edited Apr 07 '14 at 02:07

28

This should work:

@Html.TextBoxFor(model => model.SomeDateTime, "{0:MM/dd/yyyy}", new { id = "yourID" })

edited Apr 07 '14 at 02:07

Rikin Patel

8,848
7
70
78

answered Jan 22 '14 at 21:29

Yiding

2,914
3
21
16

This is the method (with minor edits due to vb) that finally worked for me using razor & vb.net thanks! – daveomcd Sep 15 '14 at 15:34

Lotok · Answer 3 · 2013-07-25T08:53:10.607

4

Where you define your model you can supply the date formatting, in this example I have DD/MM/YYYY as my format, but you can do whatever format you need.

Model Code

public class MyModel
{
   [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
   public DateTime SomeDateTime {get;set;}
}

Then your razor

@Html.EditorFor(model => model.SomeDateTime, new { id = "date1" })

edited Jul 25 '13 at 08:53

answered Jul 25 '13 at 06:56

Lotok

4,517
1
34
44

Sorry, that doesn't solve the issue. I added the DisplayFormat attribute you mentioned above but the Edit view still shows the complete DateTime format with the 12:00 AM appended to the date. Since it's a DateTime format in the sql express database its getting saved as 7/18/2013 12:00:00 AM format, and then the Edit view shows it just like that. – Austin Harris Jul 25 '13 at 08:44
@AustinHarris made a quick change to the razor and attribute. What I had was for display rather than edit – Lotok Jul 25 '13 at 08:53
If I change to the EditorFor then the date does get displayed in the correct format defined by the Model attribute you listed above. However, the JavaScript datepicker code won't hook into the EditorFor like it does with the TextBoxFor. :( – Austin Harris Jul 26 '13 at 08:13
– Austin Harris Jul 26 '13 at 08:13
Are you able to create a http://jsfiddle.net/ showing the javascript problem? (If you use Firefox, rightclick the editor for the date and choose inspect element to get the generated HTML node) – Lotok Jul 26 '13 at 08:18
I assume the datepicker issue was from EditorFor creating a different `id` (the property name). This is resolved by either setting the id, as edited here, or adjusting your script to use the new id (my preference). – brichins Nov 06 '15 at 00:07

score 4 · Answer 4 · edited May 23 '17 at 11:48

4

Based on https://stackoverflow.com/a/13702321/787511, tested with JQueryUI datepicker.

@Html.TextBoxFor(model => model.PickupDate, "{0:d}", new { id = "date1" })

edited May 23 '17 at 11:48

Community

1
1

answered Oct 30 '13 at 17:06

D.Rosado

5,634
3
36
56

score 0 · Answer 5 · answered Jul 25 '13 at 07:42

0

If you make conversion only on the View, you can write this as follow

@Html.TextBoxFor(model => model.SomeDateTime, String.Format("{0:MM/dd/yyyy}"))

answered Jul 25 '13 at 07:42

Elvin Mammadov

25,329
11
40
82

Hi, but I still need the new { id = "date1" } code in the view to use the javascript datepicker. This code does not work: @Html.TextBoxFor(model => model.PickupDate, String.Format("{0:MM/dd/yyyy}"), new { id = "date1" }) – Austin Harris Jul 25 '13 at 08:29

score 0 · Answer 6 · answered Nov 01 '17 at 11:13

Display will depend on culture. And while in most cases all other answers are correct, it did not work for me. Culture issue will also cause different problems with jQuery datepicker, if attached.

If you wish to force the format escape / in the following manner:

@Html.TextBoxFor(model => model.PickupDate, "{0:MM\\/dd\\/yyyy}", new { id = "date1" })

If not escaped for me it show 08-01-2010 vs. expected 08/01/2010.

Also if not escaped jQuery datepicker will select different defaultDate, in my instance it was May 10, 2012.

score 0 · Answer 7 · answered Nov 21 '17 at 06:36

0

   @Html.TextBoxFor(model => model.Date, String.Format("{0:dddd, MMMM d, yyyy}",Model.Date),  new { @class = "form-control"})

answered Nov 21 '17 at 06:36

manoj kumar

51
1

Please add some explanations as well. – BlackBeard Nov 21 '17 at 06:59
just add some explanation to this answer as well .. Thank You :) – Vikrant Kashyap Nov 21 '17 at 07:10

MVC DateTime Textbox Formatting Issue

7 Answers7

Linked