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
– shanmugharaj, Commented Apr 19, 2015 at 10:09
Do you have @Html.ValidationMessageFor() for the property. Does it actually hit the controller when you click submit? — user3559349
– user3559349, Commented Apr 19, 2015 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
– shanmugharaj, Commented Apr 19, 2015 at 10:14

score 2 · Accepted Answer · 2015-04-19 10:52:39Z

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, 2015 at 10:52

answered Apr 19, 2015 at 10:27

user3559349

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

7 Comments

shanmugharaj Over a year ago

Thanks for reply.. I added this script in that page and i still get that error

user3559349 Over a year ago

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.

shanmugharaj Over a year ago

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

user3559349 Over a year ago

For testing, replace @Html.EditorForModel() with @Html.TextBoxFor(m => m.HireDate, "{0:dd/MM/yyyy}", new { @class = "date" }) and @Html.ValidationMessageFor(m => m.HireDate)

shanmugharaj Over a year ago

I replace and checked.. Bad luck same error comes.. :(

|

shanmugharaj · Accepted Answer · 2015-04-19 12:43:12Z

0

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 !!

answered Apr 19, 2015 at 12:43

shanmugharaj

3,9347 gold badges48 silver badges71 bronze badges

Collectives™ on Stack Overflow

How to customize DateTime format using Editor Templates in MVC

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related