Datetime validation headache in MVC 4 : The Official Microsoft ASP.NET Forums

Reply

haraldsh

0 Points

Datetime validation headache in MVC 4

Aug 08, 2012 09:38 AM|LINK

I've created a database and added it to my project using Entity Framework.

Since I live in Norway, I've added the globalization tag along with the cultureinfo for 'nb-no', so my decimals and dates should be correct.

What I'm experiencing, is that while the date is shown correctly, the date cannot be saved unchanged. The datetime format I'm using is {0:d} or dd.MM.yyyy as it corresponds in nb-no. However, I can only store dates as dd/MM/yyyy, but it'll be displayed as dd.MM.yyyy ...

I've tried lots of things:

1. Adding a metaclass

public class PCStatusMeta
    {
        [DataType(DataType.Time)]
        public TimeSpan OrderedDate { get; set; }

        [DataType(DataType.Time)]
        public TimeSpan ApprovedDate { get; set; }

        [DataType(DataType.Time)]
        public TimeSpan ObsoleteDate { get; set; }
    }

I thought the bug described in https://connect.microsoft.com/VisualStudio/feedback/details/705643/a-data-val-date-attribute-is-generated-for-time-fields-in-asp-net-mvc-4 had something to do with it. So I changed my datetime fields to time(7) in my database and changed the meta class as well. Now I'm getting a "The value '14.07.2012' is not valid for OrderedDate.". The date is unchanged before save ... Besides, using time does not really make any sense.

2. Tried adding a custom validator

        [DisplayFormat(DataFormatString = "{0:d}", ApplyFormatInEditMode = true)]
        [DateOnly]
        public Datetime OrderedDate { get; set; }

as described in http://stackoverflow.com/questions/6388238/validate-a-date-in-a-specific-format-in-asp-net-mvc-3

Here I would get a "the field OrderedDate must have a date" validation error.

3. Currently I've gone back to using 2., but trying to see if I can avoid using the [DateOnly] since it didn't work.

Any clues on what I'm doing wrong here?

Edited by haraldsh on Aug 08, 2012 09:40 AM
Edited by haraldsh on Aug 08, 2012 09:41 AM
Edited by haraldsh on Aug 08, 2012 10:10 AM
Edited by haraldsh on Aug 10, 2012 10:28 AM

Reply

bcanonica

Contributor

3082 Points

595 Posts

Re: Datetime validation headache in MVC 4

Aug 08, 2012 10:58 AM|LINK

This might not be exactly what you want, but I usually use the Jquery Datepicker and it doesn't even allow user to enter any text, but a valid date.

http://jqueryui.com/demos/datepicker/

Please remember to mark the replies as answers if they help. This can be beneficial to other community members reading the thread.

Thanks,

BC

Blog Void Impossible

Reply

haraldsh

0 Points

15 Posts

Re: Datetime validation headache in MVC 4

Aug 10, 2012 05:43 AM|LINK

Are there any examples of how you use jquery datepicker in MVC4? I can find some for MVC3 and older, but not for MVC4.

I have three datetime fields which are retrieved from Entity Framework.

I'd imagine something like:

<script type="text/javascript">
     $(document).ready(function() {
         $(".calendar").datepicker();
     });
 </script>

<div class="editor-field">
            @Html.EditorFor(model => model.OrderedDate, new {@class="calendar"})
            @Html.ValidationMessageFor(model => model.OrderedDate)
</div>

would work.

However, I'm getting a ".datepicker is not a function" errormessage from dom. I've got jquery-1.7.2 along with jquery-ui.1.8.2 installed in my solution. There is a datepicker function in jquery-ui.1.8.2, but I can't get it to work. Do I need to add jquery.datepicker from NuGet (which makes me remove all jquery related libraries before I can actually add jquery datepicker)?

After reading this thread, I reorganized the _layout.cshtml file, the jquery scripts weren't loaded in the apropiate order.
http://forums.asp.net/t/1819464.aspx/2/10?JQuery+UI+Datepicker+not+working

But, datepicker still doesn't load. Arr, frustrating.

What is a damn shame with jquery datepicker at the moment, is that NuGet has problem installing it to the project (datepicker library wants to install an older jquery library but it can't). Yes I know, I can add datepicker manually. I've had a bit of a struggle to get datepicker to work, but I guess it's more of a learning issue than library issue. I shall continue to fiddle with datepicker since it might be the sensible way of solving the matter.

Still, what I'm trying to figure out is why the validation does not accept 14.09.2012, but must have 14/09/2012 even when the cultureinfo causes the output in other places to be 14.09.2012 ....

Btw, I'm not solving the thread before I got something working :P

Edited by haraldsh on Aug 10, 2012 05:43 AM
Edited by haraldsh on Aug 10, 2012 05:59 AM
Edited by haraldsh on Aug 10, 2012 06:02 AM
Edited by haraldsh on Aug 10, 2012 06:12 AM
Edited by haraldsh on Aug 10, 2012 06:37 AM

Reply

haraldsh

0 Points

15 Posts

Re: Datetime validation headache in MVC 4

Aug 10, 2012 06:44 AM|LINK

Short story:

This does not work in sense of initating the jquery libraries, you have to do it manually:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/themes/base/css", "~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")

</head>
    <body>

        @RenderBody()

        @RenderSection("scripts", required: false)
     
    </body>
</html>

This however works, create a new empty partial view where you add the following:

<script src="../../../Scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script src="../../../Scripts/jquery-ui-1.8.22.js" type="text/javascript"></script>
<script type="text/javascript">
     $(document).ready(function() {
$("#OrderedDate").datepicker($.datepicker.regional["nb-no"]);
     });
 </script>

I'm passing an argument along with datepicker to solve my dateproblem.

At the moment it seems like the jquery libraries are not initated properly. I'd love a more dynamic solution than what I've come up with, since I'm more than likely to break the code when I update the libraries.

Jquery datepicker does not help with my original problem, which is the . or / problem. That problem persists. When I've picked a date, it shows dd/MM/yyyy, when I come back to reedit the date it is shown as dd.MM.yyyy which the validator does not like.

Edit:

I'm continously struggling with this problem.

While I'm working on the problem I shall try to describe what I'm trying to achieve:
I want to use culture 'nb-NO' to define how a date should be input, which is dd.MM.yyyy
Normally you'd just add the globalization tag under <system.web> in the web.config with the culture you want to use and that should be it (or?).

I have a model based on Entity Framework, where one class has three Datetime? properties.

public partial class PC {

public Nullable<System.DateTime> OrderedDate { get; set; }
public Nullable<System.DateTime> ApprovedDate { get; set; }
public Nullable<System.DateTime> ObsoleteDate { get; set; }
}

these properties are extended with a metaclass

 public class PCStatusMeta
    {
     [DataType(DataType.Date)]
        public DateTime? OrderedDate { get; set; }

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

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

Which is added to the class

    [MetadataType(typeof (PCStatusMeta))]
    public partial class PCStatus {
}

Perhaps I should use the short {0:d} instead of the long specification .. anyway, the validation of the datetime fields should now use dd.MM.yyyy (at least that's what i think at this stage).

However, as soon as I've added a date, the validationerror kicks in, either after selection of a date or when trying to save the changes. The validation doesn't like dd.MM.yyyy, it wants dd/MM/yyyy or MM/dd/yyyy (worst case). The error message is telling me 'The field <x> must be a date'.

A quick search on the great google tells me this could be a jquery validation issue, since it's not configured(?) to check the locale.

http://stackoverflow.com/questions/9912688/the-jquery-ui-datepicker-custom-display-the-field-must-be-a-valid-date

http://stackoverflow.com/questions/8183555/how-can-i-prevent-a-validation-attribute-from-being-generated

Edited by haraldsh on Aug 10, 2012 06:50 AM
Edited by haraldsh on Aug 10, 2012 06:50 AM
Edited by haraldsh on Aug 10, 2012 06:50 AM
Edited by haraldsh on Aug 10, 2012 06:53 AM
Edited by haraldsh on Aug 10, 2012 06:57 AM
Edited by haraldsh on Aug 10, 2012 06:57 AM
Edited by haraldsh on Aug 10, 2012 09:29 AM
Edited by haraldsh on Aug 10, 2012 10:24 AM

Reply

haraldsh

0 Points

15 Posts

Re: Datetime validation headache in MVC 4

Aug 10, 2012 10:22 AM|LINK

I hope people can forgive me for ranting on this forum .. (especially the moderators).

Anyway, after days of debugging I figured the problem out. I sat and debugged the code and found out that jquery.validation library didn't like my dates (yes, it's the one that creates the 'The field <x> is not a date' messages ..). Shortly after that, I found a thread which showed how to solve the issue:

http://stackoverflow.com/questions/9773746/how-to-fix-regional-settings-for-jquery-datepicker-so-it-works-in-firefox-and-ie

I combined the solution and created a partial view which both enabled the jquery datepicker and alters the blasted jquery validate to accept my locale:

<script src="../../../Scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script src="../../../Scripts/jquery-ui-1.8.22.js" type="text/javascript"></script>
<script src="../../../Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="../../../Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>


<script type="text/javascript">

    $(document).ready(function () {
        $("#OrderedDate").datepicker({ dateFormat: 'dd.mm.yy' });
        $("#ApprovedDate").datepicker({ dateFormat: 'dd.mm.yy' });
        $("#ObsoleteDate").datepicker({ dateFormat: 'dd.mm.yy' });


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

The entity class and meta class are same as before.

Edited by haraldsh on Aug 10, 2012 10:23 AM
Edited by haraldsh on Aug 10, 2012 10:26 AM
Edited by haraldsh on Aug 10, 2012 10:26 AM
Marked as answer by haraldsh on Aug 10, 2012 10:27 AM

Reply

Bieters

Member

229 Points

48 Posts

Re: Datetime validation headache in MVC 4

Aug 10, 2012 11:17 AM|LINK

RenderSection doen't work in partial views. Only in regular views.

That's why you must include the script tag in your partial.

Beter use

Reply

haraldsh

0 Points

15 Posts

Re: Datetime validation headache in MVC 4

Aug 13, 2012 08:46 AM|LINK

Live & learn :)

Reply

erothvt

Member

2 Points

3 Posts

Re: Datetime validation headache in MVC 4

Aug 31, 2012 02:03 PM|LINK

You actually do not need a RenderSection, in your partial view you need to wrap your script tag in a @section scripts like so:

@section scripts
{
     <script>
     ....
     </script>
}

This will insert the script in the correct location in the _layout.cshtml page so it is below the jquery imports.

Datetime validation headache in MVC 4 RSS

7 replies

haraldsh

Datetime validation headache in MVC 4

bcanonica

Re: Datetime validation headache in MVC 4

haraldsh

Re: Datetime validation headache in MVC 4

haraldsh

Re: Datetime validation headache in MVC 4

haraldsh

Re: Datetime validation headache in MVC 4

Bieters

Re: Datetime validation headache in MVC 4

haraldsh

Re: Datetime validation headache in MVC 4

erothvt

Re: Datetime validation headache in MVC 4

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft