jQuery Girl
  1. jQuery Girl
  3. comment réparer ‘Le champ doit être une date’ sur une propriété datetime dans mvc
Intereting Posts
bootstrap.js Accordion Active Index? expression non reconnue sur browserLink Preloader ne précharge pas et charge la page une seconde fois vérifier si une case à cocher est cochée? Comment contrôler la mise en page du formulaire contextuel (alignement) append une balise span dans l’ancre dans jquery Comment changer une image sur un site en utilisant des données XML & jQuery Fonction Jquery split Rappel après le chargement d’un ajax Obtenir la valeur de dropdownlist en use value dans UrlHelper jQuery: le raccourci clavier de la zone de texte se déclenche deux fois Est-il possible de désactiver Javascript / Jquery à partir de la console de l’inspecteur du navigateur? Personnalisation de l’agendaVue hebdomadaire du calendrier complet Pourquoi dois-je actualiser chaque page pour que jQuery fonctionne correctement sur chacune d’elles? Capturer dynamicment une position div

comment réparer ‘Le champ doit être une date’ sur une propriété datetime dans mvc

Je dois capturer la date et l’heure pour ma propriété modèle. Dans ma classe de modèle, j’ai les éléments suivants 

[Required] [DataType(DataType.DateTime)] public DateTime? CallBackDate { get; set; }

Lorsque je saisis une heure valide (par exemple, le 28/05/2015 15:55 ), ce The field CallBackDate must be a date. erreur The field CallBackDate must be a date.

J’ai vu la même question et essayé diverses réponses, mais rien ne semble pouvoir s’en débarrasser. J’utilise une validation côté client non intrusive et je ne peux pas la désactiver.

La source du champ de saisie a le balisage suivant

Et jquery datetime picker a le balisage suivant 

 $('.jquery_datetimepicker').datetimepicker({ dateFormat: 'dd/mm/yy', minDate: 0, showWeeks: true, showStatus: true, highlightWeek: true, numberOfMonths: 1, showAnim: "scale", showOptions: { origin: ["top", "left"] }, timeFormat: 'hh:mm tt' });

Des idées? Merci

Des problèmes de validation du client peuvent survenir en raison d’un bogue MVC (même dans MVC 5) dans jquery.validate.unobtrusive.min.js, qui n’accepte en aucune manière le format de date / date / heure . Ce n’est pas causé par datepicker ni les navigateurs. Malheureusement, vous devez le résoudre manuellement.

Ma solution finalement efficace:

Vous devez inclure avant: 

 @Scripts.Render("~/Scripts/jquery-3.1.1.js") @Scripts.Render("~/Scripts/jquery.validate.min.js") @Scripts.Render("~/Scripts/jquery.validate.unobtrusive.min.js") @Scripts.Render("~/Scripts/moment.js")

Vous pouvez installer moment.js en utilisant: 

 Install-Package Moment.js

Et puis vous pouvez enfin append un correctif pour l’parsingur de format de date: 

 $(function () { $.validator.methods.date = function (value, element) { return this.optional(element) || moment(value, "DD.MM.YYYY", true).isValid(); } });

Dans le modèle par exemple: 

  [Display(Name = "Insert Start Date")] [Required(ErrorMessage = "You must specify the date of the event!")] [DataType(DataType.DateTime, ErrorMessage = "Podaj prawidłową datę wydarzenia")] [DisplayFormat(DataFormatSsortingng = "{0:yyyy-MM-dd HH:mm}", ApplyFormatInEditMode = true)] public DateTime StartDate { get; set; } [Display(Name = "Insert End Date")] [Required(ErrorMessage = "You must specify the date of the event!")] [DataType(DataType.DateTime, ErrorMessage = "Podaj prawidłową datę wydarzenia")] [DisplayFormat(DataFormatSsortingng = "{0:yyyy-MM-dd HH:mm}", ApplyFormatInEditMode = true)] public DateTime EndDate { get; set; }

Et voir mon exemple de code:

Cela a eu des effets positifs: dateFormat: 'yy-mm-jj',

J’ai ajouté le correctif pour l’parsingur de format de date, mais je devais définir le format sur ‘L’ pour qu’il puisse fonctionner dans tous les environnements locaux: 

 $(function () { $.validator.methods.date = function (value, element) { return this.optional(element) || moment(value, "L", true).isValid(); } });

Vous devez vous assurer que la culture de votre application est correctement définie.

Exemple

L’exemple suivant montre comment les cultures affectent l’parsing de la date: https://dotnetfiddle.net/vXQTAZ 

 DateTime dateValue; ssortingng dateSsortingng = "28/05/2015 15:55"; if (DateTime.TryParse(dateSsortingng, CultureInfo.CreateSpecificCulture("en-US"), DateTimeStyles.None, out dateValue)) { Console.WriteLine("Valid en-US date."); } else { Console.WriteLine("Not a valid en-US date."); } if (DateTime.TryParse(dateSsortingng, CultureInfo.CreateSpecificCulture("fr-FR"), DateTimeStyles.None, out dateValue)) { Console.WriteLine("Valid fr-FR date."); } else { Console.WriteLine("Not a valid fr-FR date."); }

Sortie

Not a valid en-US date.

Valid fr-FR date.

Paramètres côté client

Vous devrez peut-être également vous assurer que vos validateurs côté client utilisent correctement les cultures / mondialisation. Si vous utilisez le plug-in de validation jQuery avec MVC, consultez cette extension pour vous aider à modifier ce plug-in selon vos besoins: http://blog.icanmakethiswork.io/2012/09/globalize-and-jquery-validate.html 

 $(function () { $.validator.addMethod('date', function (value, element) { if (this.optional(element)) { return true; } var valid = true; try { $.datepicker.parseDate('dd/mm/yy', value); } catch (err) { valid = false; } return valid; }); $(".datetype").datepicker({ dateFormat: 'dd/mm/yy' }); });

Mettez ce code dans un fichier datepicker.js et incluez ce fichier en html

$ (‘# Id’). RemoveAttr (“data-val-date”); dans le script

  1. Installez moment.js (Install-Package Moment.js)
  2. Ouvrez jquery.validate.js et recherchez la méthode date: function (valeur, élément)

  3. Remplacez le contenu pour cela: 

     var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor); return this.optional(element) || (isChrome ? moment(value, 'L').isValid() : !/Invalid|NaN/.test(new Date(value)));
  4. Terminé
  1. Ajoutez maintenant la méthode suivante dans le fichier additional-methods.js et incluez ce fichier dans votre projet: 
  $.validator.addMethod('date', function (value, element) { if (this.optional(element)) { return true; } var valid = true; try { $.datepicker.parseDate('dd/mm/yy', value); } catch (err) { valid = false; } return valid; });
  1. La vue doit être comme ça: 
  @Html.TextBoxFor(model => model.DOB, new { @class = "datetype", type ="text" }) @Html.ValidationMessageFor(model => model.DOB) 
  $(function () { $(".datetype").datepicker({ dateFormat: 'dd/mm/yy' }); });

Ça marche pour moi.