jQuery datePicker not respecting date format

Question

I have set up a datepicker in a form using the following js:

$("#Expiry").datepicker({
   regional: 'en-GB',
   dateFormat: 'dd/mm/yy',
   firstDay: 1
});

and have the following in my view (asp.net MVC)

<%: Html.TextBoxFor(m => m.Expiry) %>

In my model, Expiry is a nullable DateTime?

When I use the datepicker to choose a date it does so with the correct format

When I load data from the database it always displays with 00:00:00 at the end for the time portion

How can I get it to not do this?

If I try to use a formatting expression in my binding then it won't compile.

Surely jQuery should respect the formatting I've specified for values that are pre-loaded into the form field?

It does apply the datepicker to the field, so I can choose with a calendar. It just doesn't apply the formatting to the loaded value

any ideas?

corrected - I thought the editor here added an 'S' which I deleted before posting- maybe it was some markdown or something? anyway - now corrected — ChrisCa
– ChrisCa, Commented Jun 14, 2012 at 11:59
I faced the same problem. What i did was extract the date part using javascript's dateVal.substr(0,10) and set it when binding the textbox to the datepicker. Not an elegant solution, but got the job done. — Sang Suantak
– Sang Suantak, Commented Jun 14, 2012 at 12:05

Darin Dimitrov · Accepted Answer · 2012-06-14 12:05:28Z

6

How can I get it to not do this?

You could decorate the corresponding DateTime property on your view model with the [DisplayFormat] attribute which allows you to specify a format:

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

    ... other properties
}

and inside the view replace the TextBoxFor with an EditorFor call:

<%: Html.EditorFor(m => m.Expiry) %>

edited Jun 14, 2012 at 12:05

answered Jun 14, 2012 at 11:58

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ChrisCa Over a year ago

I get the same behaviour with those changes applied - i.e. 00:00:00 is still displayed

Darin Dimitrov Over a year ago

Ooops my bad, forgot ApplyFormatInEditMode=true :-) If you don't use this it will work with DisplayFor but not with EditorFor. Sorry. Should be fine now.

Ricker Silva Over a year ago

Hey guys, I think I´m kinda close here, but don´t get it to work. I have this in the view @Html.EditorFor(model => model.BirthDate, new { @class = "datepicker" }) and the model´s data value shows ok, but the datepicker class is not applied, therefor, I can not change the date and the style is ugly. If I change it to TextBoxFor, datepciker works but format is not applied. any suggestions

iappwebdev · Accepted Answer · 2012-06-14 12:02:01Z

3

Create an editor template ~/Views/Shared/EditorTemplates/DateTime.cshtml with following content:

@model DateTime?
@{
string finalDate = string.Empty;

if (Model != null)
{
    DateTime date = (DateTime)Model;
    finalDate = String.Format("{0:d}", date.Date.ToShortDateString());
}

@Html.TextBox(string.Empty, finalDate, new { @class = "datepicker" })

In your View write (sorry it's razor syntax, I don't know the aspx syntax)

@Html.EditorFor(model => model.Expiry)

So in future, you don't have to worry about date format in your application.

answered Jun 14, 2012 at 12:02

iappwebdev

5,9301 gold badge34 silver badges48 bronze badges

Comments

Francisco Goldenstein · Accepted Answer · 2014-06-24 20:54:32Z

0

If your application is going to have only one culture, you could set the culture in the web.config file like this:

<globalization culture="en-US" />

or for Spain:

<globalization culture="es-ES" />

This way, the binding will consider the specified format to convert the form input value.

answered Jun 24, 2014 at 20:54

Francisco Goldenstein

13.9k7 gold badges63 silver badges75 bronze badges

Collectives™ on Stack Overflow

jQuery datePicker not respecting date format

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related