I am using Asp.Net Mvc3 and the unobtrusive jquery validation. I'd like to have my dates validation localized, I mean, jquery is validating my date as being MM/dd/yyyy but I would like it to be dd/MM/yyyy.
I'm trying to use the jQuery Globalize plugin (http://github.com/jquery/globalize). I added references to the scripts globalize.js and globalize.culture.pt-BR.js and when my page loads I'm running the follwing script:
(function() {
$(function() {
$.datepicker.setDefaults($.datepicker.regional['pt-BR']);
Globalize.culture("pt-BR");
});
}).call(this);
The jQuery UI plugin works as charm, but the validation doesn't. What else am I missing?
Edit:
Using the links in the answer below I solved the problem using the Globalize plugin:
Of course, I had to add a reference to the Globalize plugin in the page and also a reference to the culture that I wanted to use (all available on the plugin's site). After that is just a small piece of JavaScript code.
Globalize.culture("pt-BR");
$.validator.methods.date = function(value, element) {
return this.optional(element) || Globalize.parseDate(value);
};
I've been doing similar myself recently. I started by following the advice in Scott Hanselman's blog on this topic - you can read about this here:
I had to make some changes to use Globalize instead of jQuery Global (now jQuery Global is dead). I wrote this up in the following blog post in case that's helpful:
http://icanmakethiswork.blogspot.co.uk/2012/09/globalize-and-jquery-validate.html
My blog post features a link to this script jquery.validate.globalize.js which forces jQuery Validate to use Globalize for number / date / range parsing. The date part of this is the part that should probably solve your issue:
/// <reference path="jquery-1.7.2.js" />
/// <reference path="jquery.validate.js" />
/// <reference path="globalize.js" />
/*!
* Monkey patch for jquery.validate.js to make use of Globalize.js number and date parsing
*/
$(document).ready(function () {
var currentCulture = $("meta[name='accept-language']").prop("content");
// Set Globalize to the current culture driven by the meta tag (if any)
if (currentCulture) {
Globalize.culture(currentCulture);
}
//Tell the validator that we want numbers parsed using Globalize.js
$.validator.methods.number = function (value, element) {
if (Globalize.parseFloat(value)) {
return true;
}
return false;
}
//Tell the validator that we want dates parsed using Globalize.js
$.validator.methods.date = function (value, element) {
if (Globalize.parseDate(value)) {
return true;
}
return false;
}
//Fix the range to use globalized methods
jQuery.extend(jQuery.validator.methods, {
range: function (value, element, param) {
//Use the Globalization plugin to parse the value
var val = Globalize.parseFloat(value);
return this.optional(element) || (val >= param[0] && val <= param[1]);
}
});
});