Jquery datepicker: date de validation jj/mm/aaaa

Question

J'ai une zone de texte et une datepicker à côté et j'utilise asp.net et l'utilisateur peut entrer la date ainsi que sélectionner la date de datepicker.

Comment voulez-vous valider si la date est entrée correcte?

<script type="text/javascript"> 
     $(document).ready(function() { 
      $('#<%=StartDate.ClientID%>').datepicker({ showOn: 'button', 
        buttonImage: '../images/Calendar.png', 
        buttonImageOnly: true, onSelect: function() { }, 
        onClose: function() { $(this).focus(); } 
      }); 
     }); 
    </script> 

Answer 1

Si vous utilisez ASP.NET, vous pouvez utiliser un ASP.NET Comparer Validator [ASP.NET Date Validator].

<asp:TextBox ID="tb" runat="server"></asp:TextBox> 

<asp:CompareValidator ID="cv" runat="server" 
ControlToValidate="tb" ErrorMessage="* Please enter a valid date!" Text="*" 
Operator="DataTypeCheck" Type="Date"></asp:CompareValidator> 

**** Mise à jour **

Je pris le javascript qui a été exécuté par le validateur Comparez ci-dessus et enroula une méthode personnalisée jQuery Validation autour:

<script type="text/javascript"> 
    $(document).ready(function() { 

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

      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 || params.dateorder == "ymd")) { 
        day = m[6]; 
        month = m[5]; 
        year = (m[2].length == 4) ? m[2] : GetFullYear(parseInt(m[3], 10)); 
       } 
       else { 
        if (params.dateorder == "ymd") { 
         return null; 
        } 
        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; 
        } 
        if (params.dateorder == "mdy") { 
         day = m[3]; 
         month = m[1]; 
        } 
        else { 
         day = m[1]; 
         month = m[3]; 
        } 
        year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6], 10)); 
       } 
       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."); 

     $("#form1").validate(); 

     $("#one").rules('add', 
     { 
      truedate: { 
       cutoffyear: '2029', 
       dateorder: 'mdy' 
      } 
     }); 
    }); 

</script> 

<input id="one" /> 

Answer 2

Puisque vous êtes déjà en utilisant jquery, vous pouvez vérifier http://bassistance.de/jquery-plugins/jquery-plugin-validation/ qui a une grande flexibilité pour les validations ..

Answer 3

J'utilise ce gestionnaire pour valider l'entrée:

onClose: function(dateText, inst) { 
     try { 
      $.datepicker.parseDate('dd/mm/yy', dateText); 
     } catch (e) { 
      alert(e); 
     }; 

Hope, il sera utile pour quelqu'un

Answer 4

J'utilise un mélange de l'approche de Katrin & Doc Holiday, en utilisant la méthode utilitaire parseDate de contrôle DatePicker dans un validateur personnalisé que je l'ai appelé isDate.

Remplacez simplement l'argument de format de parseDate par la valeur appropriée (référence: http://docs.jquery.com/UI/Datepicker/parseDate).

$(document).ready(function() 
    { 
     $.validator.addMethod('isDate', function(value, element) 
     { 
      var isDate = false; 
      try 
      { 
       $.datepicker.parseDate('dd/mm/yy', value); 
       isDate = true; 
      } 
      catch (e) 
      { 

      } 
      return isDate; 
     }); 

     $("#form1").validate(); 

     $("#dateToValidate").rules("add", { isDate: true, messages: {isDate: "Date to Validate is invalid."} }); 
    }); 

Il n'est probablement pas recommandé que le validateur référence un contrôle d'interface utilisateur, mais que diable. :)