Kendo DatePicker ne réussit pas la validation du format de date personnalisé
J'utilise Kendo DatePicker pour modifier un champ Date affiché dans une grille Kendo dans mon projet ASP.NET MVC 4. Afin que le DatePicker utilisé pour le champ Date utilise une chaîne de format de date personnalisée, j'ai mis à jour le fichier Date.cshtml du dossier EditorTemplates avec les éléments suivants:
@(Html.Kendo().DatePickerFor(m => m).Format("dd/MM/yyyy"))
En faisant cela, j’ai réussi à ce que DatePicker affiche le format comme je le souhaite. Cependant, la validation de certaines des dates saisies pour la saisie a échoué, que ce soit via la saisie manuelle ou la sélection dans le calendrier contextuel.
Après une enquête plus approfondie, je peux dire que le DatePicker valide la date sur un format M/d/Y. Cette hypothèse a été établie sur la base de mes fondements selon laquelle le 12/1/2012 est une date valide, alors que le 13/1/2012 ne l'est pas.
J'ai également essayé d'ajouter .ParseFormat("dd/MM/yyyy") à la fin de la déclaration DatePicker dans Date.cshtml mais cela ne résout rien. Donc, je dirais que c'est certainement un bug et je le signalerai à Telerik plus tard.
Mais pour le moment, je cherche une solution pour que cela fonctionne. Je trouve que je peux remplacer kendo.ui.validator.rules.mvcdate en Javascript pour avoir ma propre fonction de validation. Bien que cela fonctionne correctement dans Chrome, cela ne fonctionne pas dans IE9.
Donc, des idées pour faire en sorte que DatePicker accepte le format de saisie dd/MM/yyyy? Merci d'avance.
En interne, la règle de validation de date pour ASP.NET MVC (validation client discrète) utilise la méthode kendo.parseDate (string) , qui utilise en interne les modèles de date prédéfinis si aucun format/s n'est/sont définis. Je suppose que dans votre cas, la culture par défaut est "en-US" et c'est pourquoi la validation échoue, car les dates au format "jj/mm/aaaa" sont considérées comme non valides. Une solution possible consiste à remplacer la règle de validation de la date (comme vous l'avez fait) et à analyser la chaîne en utilisant un format spécifique. L'autre option consiste à définir les paramètres de culture diff pour la page. Par exemple, le format de date court pour la culture "de-DE" est "jj/mm/aaaa".
J'utilise cette méthode et ça fonctionne bien ..
Ajoutez ces deux lignes dans votre page.
<script src="@Url.Content("~/Scripts/jquery.validate.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")"></script>
Puis substituez la méthode de validation de date jQuery.
<script>
$(document).ready(function () {
kendo.culture("en-MY"); //your culture
$.validator.addMethod('date',
function (value, element) {
return this.optional(element) || kendo.parseDate(value)
});
});
</script>
En attendant, dans mon Web.config j'ai ceci ...
<system.web>
<globalization uiCulture="en-MY" culture="en-MY"></globalization>
</system.web>
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
[Required(ErrorMessage = "Pick a date from Kendo Date Picker")]
public DateTime mydate{ get; set; }
@(Html.Kendo().DatePickerFor(m=>m.mydate)
.Name("MyDate")
.Format("dd/MM/yyyy")
.ParseFormats(new string[] {"dd/MM/yyyy"}))
/ Ajout d'une fonction script document.ready /
$(document).ready(function () { kendo.culture("en-GB");
$.validator.methods['date'] = function (value, element) {
var check = false;
var re = /^\d{1,2}\/\d{1,2}\/\d{4}$/;
if (re.test(value)) {
var adata = value.split('/');
var dd = parseInt(adata[0], 10);
var mm = parseInt(adata[1], 10);
var yyyy = parseInt(adata[2], 10);
var xdata = new Date(yyyy, (mm - 1), dd);
if ((xdata.getFullYear() == yyyy) && (xdata.getMonth() == (mm - 1)) &&
(xdata.getDate() == dd)) {
check = true;
}
else {
alert(value);
check = false;
}
} else
check = false;
return this.optional(element) || check;
}
});
J'ai eu le même problème lors de l'utilisation du composant de Gantt ici . Le support Telerik m'a mis sur la bonne voie en me renvoyant vers ici .
Mon omission cruciale était que je n'avais pas inclus les éléments suivants dans mon fichier _Layout.vbhtml:
<script>
kendo.culture("en-GB");
</script>
Une fois inclus (avec le script kendo.culture approprié dans mon kit JS), l’assistant a commencé à se comporter comme prévu.
J'ai changé la règle de validation de la date:
$.validator.methods.date = function (value, element) {
return this.optional(element) || /^\d\d?-\w\w\w-\d\d\d\d/.test(value);
};
Mon format est légèrement différent du vôtre mais vous devriez pouvoir le modifier.
La réponse simple est de ne pas utiliser un format de date personnalisé. Toujours faire .Format ("MM/jj/aaaa") explicitement et ne pas utiliser "jj/MM/aaaa" ("aaaa-MM-jj" ou "MMM j, aaaa" pourrait être correct). Et configurez votre serveur Web pour utiliser les paramètres régionaux américains dans le panneau de configuration ou dans Web.config.
Maintenant, pour une explication du problème et comment faire fonctionner jj/mm/aaaa:
La validation de la date du kendo utilise le format de date par défaut de la culture de kendo kendo.culture (). Calendar.patterns.d (et .t pour le temps). Si vous le définissez directement ou appliquez une culture différente, le format de date à valider est défini. Kendo.parseDate est utilisé, alors quelque chose comme "MMM d, aaaa" conviendra mais quelque chose comme "jj/MM/aaaa" échouera à la validation si d> 12 et que la culture américaine par défaut est utilisée (voir la démonstration de kendo Globalization pour savoir comment changer de culture).
La raison en est que DatePicker.Format (...) est légèrement cassé. Il s'agit d'un bogue dans kendo.aspnetmvc.js qui fournit une autre fonction de validation de date qui ignore le format DatePicker et exécute simplement parseDate en utilisant le format de date de culture actuel. C'est le javascript corrigé:
date: function(input) {
var dp = input.data("kendoDatePicker") || input.data("kendoDateTimePicker");
if (dp != undefined) {
return input.val() === "" || kendo.parseDate(input.val(), dp.options.format) !== null;
}
return input.val() === "" || kendo.parseDate(input.val()) !== null;
},
De plus, il existe un bogue mineur dans la fonction de validation de la date dans kendo.validator.js/kendo.web.js qui fait que la validation de la date sur les grilles dans Internet Explorer échoue toujours.
Assurez-vous également que la globalisation de votre serveur Web est définie sur US pour correspondre à la culture du kendo (dans Web.config ou dans le Panneau de configuration régional Windows). Firefox publie MM/jj/aaaa et le serveur Web doit correspondre. De plus, le format de date régional du serveur Web est appliqué à tous les navigateurs clients si vous ne spécifiez pas explicitement DatePicker.Format. Donc, si votre serveur Web a des formats de date canadiens/britanniques définis dans le panneau de configuration de Windows, la grille de kendo DatePickers utilise par défaut jj/MM/aaaa, puis une erreur lors de la validation et à nouveau lorsque Firefox affiche sur le serveur Web (la culture par défaut de kendo sous Firefox affiche MM/jj/aaaa donc si votre serveur Web attend jj/mm/aaaa, la liaison de date mvc échoue).
Remarque: Si vous préférez utiliser le validateur de date autre que mvc: Supprimez l'attribut data-val-date. Ajouter: data-type =\"date \" data-format =\"jj/MM/aaaa h: mm: ss tt \". Je crois que ce n'est pas possible en utilisant l'aide de HTML. Vous devez spécifier le code HTML et le javascript directement.
Remarque: Les DatePickers non-grille ne semblent pas avoir de validation en raison de l'absence de l'attribut "data-val-date".
Aussi: "N'oubliez pas que KendoUI utilise d'abord l'option parseFormats pour analyser la date, puis la convertit en option de format et exécute enfin des validations. C'est pourquoi j'utilise dans la validation aaaa-MM-jj et non [" MM/jj/aaaa "," jj/MM/aaaa "]." - Comment valider une date au format aaaa-MM-jj en utilisant le validateur de kendo?
Ligne de globalisation pour Web.config:
<globalization requestEncoding="utf-8" responseEncoding="utf-8" culture="en-US" uiCulture="en-US" />