La date de champ doit être une date en mvc en chrome

Je fais une simple application Internet MVC4, qui permet d’append des éléments aux catégories.

Voici ce que j’ai fait jusqu’à présent.

J’ai un datepicker dans mvc view. Le script pour le sélecteur de date est comme ça.

  @Scripts.Render("~/bundles/jqueryval")  $(function () { $('#dtItemDueDate').datepicker({ dateFormat: 'dd/mm/yy', minDate: 0 }); });  

Ma propriété modèle:

  [DisplayName("Item DueDate")] [Required] [DisplayFormat(DataFormatSsortingng = "{0:dd/MM/yyyy}",ApplyFormatInEditMode = true)] [DataType(DataType.DateTime)] public DateTime? dtItemDueDate { get; set; } public char charCompleted { get; set; } 

et à mon avis, j’ai fait ceci:

 @Html.TextBoxFor(m => m.dtItemDueDate) @Html.ValidationMessageFor(m => m.dtItemDueDate) 

L’erreur est comme ça:

 The field Item DueDate must be a date. 

Ce qui est étrange, c’est que cela fonctionne dans IE et Mozilla, mais pas dans Chrome.

J’ai trouvé beaucoup d’articles sur SO, mais aucun ne m’aide

Des idées / suggestions?

Note de l’éditeur: Cette réponse n’est plus valide. À partir de jQuery 1.9 (2013), la méthode $.browser a été supprimée.


D’après ce billet, c’est un problème connu avec les navigateurs Webkit.

Une solution consiste à modifier jquery.validate.js en recherchant la fonction date: function (value, element) et à y insérer ce code:

 if ($.browser.webkit) { //ES - Chrome does not use the locale when new Date objects instantiated: var d = new Date(); return this.optional(element) || !/Invalid|NaN/.test(new Date(d.toLocaleDateSsortingng(value))); } else { return this.optional(element) || !/Invalid|NaN/.test(new Date(value)); } 

Sans changer jquery.validate.js, vous pouvez utiliser le code ci-dessous dans $(document).ready() :

 jQuery.validator.methods.date = function (value, element) { var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor); if (isChrome) { var d = new Date(); return this.optional(element) || !/Invalid|NaN/.test(new Date(d.toLocaleDateSsortingng(value))); } else { return this.optional(element) || !/Invalid|NaN/.test(new Date(value)); } }; 

La solution Rowan Freeman ne fonctionnera pas pour moi car .toLocaleDateSsortingng(value) pas les chaînes de value

voici la solution que j’ai trouvée => dans jquery.validate.js trouver cette définition de fonction: “date: fonction (valeur, élément)” et remplacer le code avec:

 // http://docs.jquery.com/Plugins/Validation/Methods/date date: function (value, element) { var d = value.split("/"); return this.optional(element) || !/Invalid|NaN/.test(new Date((/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) ? d[1] + "/" + d[0] + "/" + d[2] : value)); }, 

Vous trouverez ci-dessous le code de travail qui peut être utile pour résoudre le problème du sélecteur de date en chrome et safari: Modèle:

 public DateTime? StartDate { get; set; } 

Vue:

 @Html.TextBoxFor(model => model.StartDate, "{0:dd/MM/yyyy}", new { @type = "text", @class = "fromDate" }) 

js:

 $(function () { checkSupportForInputTypeDate(); $('#StartDate').datepicker({ changeMonth: true, changeYear: true, dateFormat: 'dd/mm/yy' }); }); //Function to configure date format as the native date type from chrome and safari browsers is clashed with jQuery ui date picker. function checkSupportForInputTypeDate() { jQuery.validator.methods.date = function (value, element) { var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor); var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor); if (isSafari || isChrome) { var d = new Date(); return this.optional(element) || !/Invalid|NaN/.test(new Date(d.toLocaleDateSsortingng(value))); } else { return this.optional(element) || !/Invalid|NaN/.test(new Date(value)); } }; } 

Voici la solution de Maxim Gershkovich en détail:

 jQuery.validator.methods.date = function (value, element) { if (value) { try { $.datepicker.parseDate('dd/mm/yy', value); } catch (ex) { return false; } } return true; }; 

Notes :

  • Cela dépend de la méthode datepicker jQuery fournie avec l’interface utilisateur jQuery.
  • Ceci est en réalité plus robuste que la validation de date native fournie avec jQueryValidate.

    Selon la documentation sur la validation de la date :

    Renvoie true si la valeur est une date valide. Utilise la date intégrée de JavaScript pour vérifier si la date est valide et ne vérifie donc pas son intégrité . Seul le format doit être valide, pas la date réelle. Par exemple, 30/30/2008 est une date valide.

    Attendu que parseDate vérifiera que la date est valide et existe réellement.

J’ai résolu ce problème en passant de DateTime à Ssortingng .

C’est la meilleure solution pour un bon entretien que je puisse penser pour le moment.