jquery datepicker: Valider la valeur d'entrée actuelle?

Question

J'ai utilisé le plugin Datepicker de jQuery UI. Je veux être capable de valider si la zone de texte d'entrée à laquelle elle est attachée a actuellement une date valide ou non.

Par exemple:

Si quelqu'un décide de taper 02/30/2010 Je voudrais être en mesure de demander en quelque sorte le plug-in si cette valeur d'entrée actuelle est une date valide (ce qui est pas dans ce cas).

Est-ce que quelqu'un sait comment cela peut être fait?

Answer 1

Regardez le dateFormat et constrainInput options du sélecteur de date. http://jqueryui.com/demos/datepicker/#option-dateFormat

Answer 2

J'ai ajouté une méthode "truedate" au validateur. J'aimerais créditer le code de qui que ce soit, mais je ne me souviens pas où je l'ai trouvé.

$.validator.addMethod("truedate", function (value) { 
     function GetFullYear(year) { 
      var twoDigitCutoffYear = 10 % 100; 
      var cutoffYearCentury = 10 - twoDigitCutoffYear; 
      return ((year > twoDigitCutoffYear) ? (cutoffYearCentury - 100 + year) : (cutoffYearCentury + year)); 
     } 

    if (value == null || value == '') 
     return true; 
    var yearFirstExp = new RegExp("^\\s*((\\d{4})|(\\d{2}))([-/]|\\. ?)(\\d{1,2})\\4(\\d{1,2})\\.?\\s*$"); 
    try { 
     m = value.match(yearFirstExp); 
     var day, month, year; 
     if (m != null && (m[2].length == 4)) { 
      day = m[6]; 
      month = m[5]; 
      year = (m[2].length == 4) ? m[2] : GetFullYear(parseInt(m[3])); 
     } 
     else { 
      var yearLastExp = new RegExp("^\\s*(\\d{1,2})([-/]|\\. ?)(\\d{1,2})(?:\\s|\\2)((\\d{4})|(\\d{2}))(?:\\s\u0433\\.)?\\s*$"); 
      m = value.match(yearLastExp); 
      if (m == null) { 
       return null; 
      } 
      day = m[3]; 
      month = m[1]; 
      year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6])); 
     } 
     month -= 1; 
     var date = new Date(year, month, day); 
     if (year < 100) { 
      date.setFullYear(year); 
     } 
     return (typeof (date) == "object" && year == date.getFullYear() && month == date.getMonth() && day == date.getDate()) ? date.valueOf() : null; 
    } 
    catch (err) { 
     return null; 
    } 
}, "Please enter an actual date."); 

$('form').validate({ 
       rules: { 
        insurance_GL: "truedate", 
       }, 
       messages: { 
        insurance_GL: "Insurance GL date is not valid", 
       } 
}); 

EDIT Je dois avoir obtenu d'ici: Jquery datepicker: validate date mm/dd/yyyy

Answer 3

Vous pouvez résoudre votre problème en faisant zone de texte en lecture seule et mis en format de date que vous le souhaitez. Donc, l'utilisateur n'est pas en mesure de taper quoi que ce soit dans la zone de texte, l'utilisateur ne sélectionne que le format de date correct (que vous définissez) à partir du sélecteur de date. S'il vous plaît voir l'exemple ci-dessous.

<p>Date: <input type="text" id="datepicker" size="30" readonly="readonly"/></p>  
<script> 
$(function() { 
    $("#datepicker").datepicker(); 
    $("#datepicker").datepicker("option", "dateFormat",'yy-mm-dd'); 
}); 
</script> 

Answer 4

Bien que cette question est presque deux ans, je l'ai récemment traité une solution similaire et a constaté que la bibliothèque Globalize est la meilleure approche. Par exemple, supposons que vous ayez une zone de texte associée à un outil de sélection de date jQueryUI. Lorsque le focus est perdu dans la zone de texte, vous pouvez utiliser Globalize pour valider la date saisie. Dans ce cas, la zone de texte est effacé si la date est invalide ou mis dans un format standard si la date est valide:

$('#myDateTextBox').blur(function() { 
    var parsedDate = Globalize.parseDate($(this).val()); 
    if (parsedDate == null) { 
     $(this).val(''); 
    } 
    else { 
     $(this).val(Globalize.format(parsedDate, 'd')); 
    } 

La bibliothèque Globalize vous permet de spécifier une culture (en utilisant la langue de la demande idéalement) afin l'utilisateur peut entrer une date dans le format de leur culture.

Answer 5

Il est possible d'utiliser JS Date pour valider votre chaîne de date.

var myDate = new Date(userInputString); 

if (myDate == "Invalid Date"){ 
// user input is invalid 
} 

Notez également que (myDate === "Invalid Date") renvoie false même pour les dates non valides. En utilisant == fonctionne très bien mais la bonne façon de vérifier est (isNaN(d.getTime()))

Answer 6

Il est très facile

let value = $(this).val(); 
let format = $(this).datepicker('option', 'dateFormat'); 
let valueIsValid = false; 
try { 
    $.datepicker.parseDate(format, value); 
    valueIsValid = true; 
} 
catch (e) {}