How to customize DateTime format using Editor Templates in MVC

Question

Possible duplicate of this question

But i tried that step (I received via POST) and didn't get success.

My globalization setting is <globalization uiCulture="en-in" culture="en-in"/>

and Template Code is

@model DateTime?

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

And meta data code

 [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}",
            ApplyFormatInEditMode = true)]
        [DisplayName("Employee Hire Date")]
        public DateTime HireDate { get; set; }

and this is the js i am using

<script type="text/javascript">
    $(function () {
        $("input:text.date").datepicker({ dateFormat: "dd/mm/yy" });
    });
</script>

It accepts the Date range as,

11/01/2015
7/05/2015
12/04/2015

But if i given this

    30/04/2015

model validation fails.

Couldn't figure out the fix for this. I started learning MVC as a beginner. So please bear this question. Please help me.

UPDATE

If i change my js code like this
$(function () {
        $("input:text.date").datepicker({ dateFormat: "dd/MM/yy" });
    });
but the format changes to '30/April/2015' which i don't want.

@StephenMuecke after submitting form i got this error ate the side of the textbox says `The field Employee Hire Date must be a date. ` — shanmugharaj, Apr 19 '15 at 10:09
Do you have `@Html.ValidationMessageFor()` for the property. Does it actually hit the controller when you click submit? — , Apr 19 '15 at 10:12
No if it gives that error its not hitting controller. For the first three range i mentioned for that it hits controller — shanmugharaj, Apr 19 '15 at 10:14

score 2 · Accepted Answer · 2015-04-19T10:52:39.753

2

The error occurs because jquery.validate.js validates the date by using the javascript date constructor (new Date(value)) which fails. You can use the jquery globalize plugin or you can override the jquery.validate method by adding the following script (assuming this is the jqueryUI datepicker)

<script>
  // do NOT wrap in document.ready
  $.validator.addMethod('date', function (value, element) {
    if (this.optional(element)) {
      return true;
    }
    var valid = true;
    try {
      $.datepicker.parseDate('dd/mm/yy', value);
    }
    catch (err) {
      valid = false;
    }
    return valid;
  });
</script>

Side notes:

ApplyFormatInEditMode = true is only applicable when using EditorFor() to generate the browsers implementation of the HTML5 datepicker (in which case it would need to be DataFormatString = "{0:yyyy-MM-dd} anyway) so it can be removed.
Your template is unnecessary and you should just use @Html.TextBoxFor(m => m.HireDate, "{0:dd/MM/yyyy}", new { @class = "date" })

edited Apr 19 '15 at 10:52

answered Apr 19 '15 at 10:27

Thanks for reply.. I added this script in that page and i still get that error – shanmugharaj Apr 19 '15 at 10:43
Make sure you add it after the `jquery.js` and `jquery.validate.js` files and **do not** wrap it in `document.ready()`. And can you confirm you are using the jqueryUI datepicker. – Apr 19 '15 at 10:50
I added my complete code over there. and if i make alert the value of valid its says true , still i m getting that error – shanmugharaj Apr 19 '15 at 10:56
For testing, replace `@Html.EditorForModel()` with `@Html.TextBoxFor(m => m.HireDate, "{0:dd/MM/yyyy}", new { @class = "date" })` and `@Html.ValidationMessageFor(m => m.HireDate)` – Apr 19 '15 at 10:59
I replace and checked.. Bad luck same error comes.. :( – shanmugharaj Apr 19 '15 at 11:03
If `valid` is returning `true` then no error will be displayed (and any existing error message will be removed) so there is something else going on in your code. Are you now hitting the controller? – Apr 19 '15 at 11:03
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/75633/discussion-between-shan-and-stephen-muecke). – shanmugharaj Apr 19 '15 at 11:03

score 0 · Answer 2 · answered Apr 19 '15 at 12:43

Stephens Answer is right. Still i modified the script like this to make jquery.validate to work

$.validator.methods.date = function (value, element) {
   return this.optional(element) || $.datepicker.parseDate("dd/mm/yy", value);
}

I guess there is no difference between these two. Still this one is working and this

 $.validator.addMethod('date', function (value, element) {
    if (this.optional(element)) {
      return true;
    }
    var valid = true;
    try {
      $.datepicker.parseDate('dd/mm/yy', value);
    }
    catch (err) {
      valid = false;
    }
    return valid;
  });

is not working.

Please if some one finds out tel me.. Thanks !!

How to customize DateTime format using Editor Templates in MVC

2 Answers2