Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

C# ASP.NET MVC Forms Adding Form Validation Implementing Unobtrusive Client-Side Validation

Kristian Berrum
Kristian Berrum
12,664 Points
Posted by Kristian Berrum
Kristian Berrum
12,664 Points

Jquery Validation and Datepicker

I get another error from the client side validation. That my date must be a date.:

"The field Date must be a date."

I use: <script src="~/Scripts/bootstrap-datepicker.min.js"></script> <script> $('input.datepicker').datepicker({ format: 'd.m.yyyy' }) </script>

and for the Html Date element i got: <div class="form-group"> @Html.LabelFor(m => m.Date, new { @class = "control-label" } ) @Html.TextBoxFor(m => m.Date, "{0:d}", new { @class = "form-control datepicker" })

Its the same error in Chrome and Edge.

I would also add that i think this issue is related to the European vs American date form. If i pick a date that work both ways I do not get an error. Like 1.1.2017. Seems like the client validation needs the US format. Can this be changed?

Adam McGrade
Adam McGrade
26,333 Points
Adam McGrade
Adam McGrade
26,333 Points

I think you may have to use / instead of . in your date format. So d/m/yyyy

(https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#format)

Kristian Berrum
Kristian Berrum
12,664 Points
Kristian Berrum
Kristian Berrum
12,664 Points

Ahh yes, you get validation error when not using "/", thanks dude! Is there a way to use . instead of /, i like the "."-notation better.

2 Answers

Hakim Rachidi
Hakim Rachidi
38,490 Points
Hakim Rachidi
Hakim Rachidi
38,490 Points

By default the jQuery validation extension uses only the "MM/dd/yyyy" format. You can use the jQuery validation globalize (from Nuget) extension to validate the date in a different format. Here is the corresponding stack overflow entry.

Adam McGrade
Adam McGrade
26,333 Points
Adam McGrade
Adam McGrade
26,333 Points

According to the docs, you can pass format options when you initialise the datepicker. In the toDisplay function, you could write some code to convert the date from the datepicker to the format that you want to display. I havent tested this, by maybe something like this would do the trick:

$('input.datepicker').datepicker({
    format: {
        toDisplay: function (date, format, language) {
            var d = new Date(date);
            return date.getDate() + "." + date.getMonth() + "." + date.getFullYear();
        },
    }
});