Combinig JQuery datapicker avec validation du champ de saisie/filtre

Question

J'utilise JQueryui Datepicker. Mais cela n'affecte pas vraiment les valeurs entrées manuellement dans le champ de saisie. Est-il possible que je puisse utiliser le même code (client) pour spécifier un masque/validation dans le champ de saisie (lorsque le datapicker n'est pas utilisé - pas seulement que le formatage de datepicker soit correct).

Quelle serait la manière la plus cohérente de le faire dans le framework JQuery?

Merci

Remarques

1. Il semble jQuery mis sur les appuie-som entrée (par exemple, je ne peux entrer masque chiffres- « YYMMDD ») de sorte que la chose principale est d'obtenir la validation.

Answer 1

vous pouvez utiliser l'formatDate-choix du datepicker: http://docs.jquery.com/UI/Datepicker/formatDate

Answer 2

Utilisez le jQuery Validation plug-in. Il coexiste avec le sélecteur de date de l'interface utilisateur; Nous faisons cela dans nos applications. Sachez que le validateur de date par défaut ne marquera pas les dates clairement non valides telles que "40 février 2009", car il utilise l'analyseur de date JavaScript, qui est plus qu'un peu laxiste sur ce qu'il accepte. Mais c'est vraiment facile à replace the default validator with one of your own.

Answer 3

En supposant que vous utilisez le plugin Validate, vous pouvez écrire une règle personnalisée qui réimplémente la propre logique de ui.Datepicker pour décider quelles dates sont sélectionnables ou non. Je devais écrire aujourd'hui et pensé que quelqu'un d'autre pourrait bénéficier de savoir comment:

jQuery.validator.addMethod("vdate", function(value, element) { 
    // Datepicker's internal method for choosing selectable ported to a custom validator method. 
    // All criteria are the same, except othermonth is omitted. 
    var inst =   $.data(element,'datepicker'); // instance data used internally by datepicker's functions 
    var printDate =  $(element).datepicker("getDate"); 
    var minDate =  $.datepicker["_getMinMaxDate"](inst, 'min', true); 
    var maxDate =  $.datepicker["_getMinMaxDate"](inst, 'max'); 
    var beforeShowDay = $.datepicker["_optionDatepicker"](element,'beforeShowDay'); 
    var daySettings = (beforeShowDay ? beforeShowDay.apply((inst.input ? inst.input[0] : null), [printDate]) : [true, '']); 
    var unselectable = (!daySettings[0] || (minDate !=null && (printDate < minDate)) || (maxDate !=null && (printDate > maxDate))); 
    return (this.optional(element) || !unselectable); 
}, "Please choose a valid date"); 

Ce addMethod particulier a l'avantage de vérifier chaque zone individuellement, donc si vous avez plusieurs datepickers partage le nom de classe « vdate », mais peut-être ayant Différents paramètres minDate/maxDate/beforeShowDay, Validate vérifie et suit les propres règles de chaque client. En outre, si vous avez écrit une fonction compliquée pour beforeShowDay qui exclut les week-ends, les jours dont le nombre est premier, l'anniversaire de votre femme et le dernier jour de chaque mois, tant que cela fonctionne dans ui.Datepicker, Valider identifiez-les tous comme des dates non valides.

Answer 4

Y a-t-il une raison pour laquelle vous ne pouvez pas faire la chose la plus simple possible?

Accrocher un événement, par ex. sur le flou du champ date, et vérifiez les valeurs comme ci-dessous:

1. Comparez la longueur de l'entrée avec le format.
2. Analyser la date et tenter de créer un objet date pour vérifier que la date est une date réelle.