Ajouter une liste de dates pour tableau, valider et obtenir la valeur max

j'ai quelques champs d'entrée comme ci-dessous:Ajouter une liste de dates pour tableau, valider et obtenir la valeur max

<input type="text" name="date_1" class="dataList" value="2009-12-30" /> 
<input type="text" name="date_2" class="dataList" value="2007-06-12" /> 
<input type="text" name="date_3" class="dataList" value="2009-10-23" /> 


<input type="text" name="date_max" class="result" value="0000-00-00" />

je dois faire quelque chose comme ceci:

1) Ajouter pour dresser la liste des dates de tous les champs de saisie avec l'attribut class = "dataList" (les champs contiennent la date au format aaaa-mm-jj)

2) champs sont pleins et vérifier si toutes les dates sont en bon format de (mois pas plus de 12, jour pas Maoré que 31, longueur de tous les caractères qual de 10)

3A) Si les conditions de second point sont vraies alors:

- trier le tableau de max à min valeur

- obtenir le premier élément de tableau et le mettre à la valeur d'entrée avec le nom = "data_max"

3B) Si les conditions de second point sont fausses alors:

- get "0000-00-00" et réglez la valeur de l'entrée avec le nom = "data_max"

Je l'ai fait tout cela choses en PHP, mais je veux le faire dans jQuery.

En jQuery je peux mettre à jour en temps réel la valeur du champ data_max.

S'il vous plaît me donner quelques suggestions quelles fonctions je devrais utiliser.

Source

2009-11-16 BlueMark

faire une expérience de ce ...

<html> 
    <head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
     var dataList = new Array(); 
     $(document).ready(function() 
     { 
      update(); 
     }); 

     function update() 
     { 
      dataList = new Array(); 
      $('.dataList').each(function(i) 
      { 
       dataList[i] = this.value; 
      }); 

      if(confirmDates(dataList)) 
      { 
       // Perform sort from max to min 
       dataList.sort(); 
       dataList.reverse(); 

       $("input[name$='date_max']").val(dataList[0]); 
      } 
      else 
      { 
       $("input[name$='date_max']").val("0000-00-00"); 
      } 
     } 

     function confirmDates(arrayList) 
     { 
      for(var i in arrayList) 
      { 
       // Check length is 10 
       if(arrayList[i].length != 10) 
        return false; 

       // Check month not more than 12 
       var year = arrayList[i].substring(0, 4); 
       var month = arrayList[i].substring(5, 7); 
       var day = arrayList[i].substring(8, 10); 

       if(parseInt(month) > 12 || parseInt(day) > 31) 
        return false; 
      } 

      return true; 
     } 
    </script> 
</head> 
<body>              
    <input type="text" name="date_1" class="dataList" value="2009-12-30" /> 
    <input type="text" name="date_2" class="dataList" value="2007-06-12" /> 
    <input type="text" name="date_3" class="dataList" value="2009-10-23" /> 
    <input type="text" name="date_max" class="result" value="0000-00-00" /> 
    <button onclick="update()" value="Update" /> 
</body> 
</html>

Source

2009-11-16 22:33:39 SimonDever

'for..in' est plus approprié pour les objets que les tableaux. En outre, il est considéré comme une «meilleure pratique» de valider chaque valeur 'i' avec' if (! ArrayList.hasOwnProperty (i)) {continue; } '. –

La meilleure pratique signifie simplement qu'il y a d'autres façons de le faire, mon code fonctionne et est rapide, le fait que for..in fonctionne sur les tableaux est parce que c'est ce qu'il a été conçu pour faire, sinon il ne le permettrait pas. J'aurais pu faire un contrôle de longueur et utiliser une boucle normale, mais c'est généralement plus laide et il faut plus de lignes. Votre commentaire est le bienvenu mais vaut à peine le vote vers le bas. – SimonDever

Je pense que le code d'Ambrosia est le meilleur parce qu'il est clair, simple, rapide et fonctionne comme je le demande. Je vous remercie. – BlueMark

Je pense que vous trouverez que beaucoup de tâches que vous décrivez pourraient être accomplies si vous avez passé quelques heures avec des tutoriels jQuery. Les official tutorials sont plutôt bons. "Comment fonctionne jQuery" et "Premiers pas avec jQuery" sont très bien. Google un peu plus si vous n'êtes pas satisfait.

L'objet Date() de JavaScript est notoirement moche à utiliser, mais vous devrez probablement l'utiliser.

1) Ce selector devrait vous permettre de rassembler toutes vos valeurs d'entrée:

var dates = $('input.dataList, input.result');

2) je suggère la recherche de code de validation de la date existante plutôt que d'écrire votre propre. Si vous trouvez que cela est difficile, alors vous pouvez utiliser le jQuery $.post method (pour envoyer vos données à un script PHP, effectuer l'y validation, et communiquer les résultats.

3) Tri le tableau peut exiger que vous écrivez un custom sort callback. Ce rappel peut fonctionner sur un tableau d'éléments jQuery et utiliser la méthode val() pour extraire ces valeurs.

Source

2009-11-16 22:10:14 jkndrkn

Lorsque vous travaillez avec des dates, il est toujours préférable d'essayer d'utiliser les objets de date qui sont disponibles. Le code ci-dessous fera ce que vous avez demandé, sauf pour les erreurs détaillées sur les raisons pour lesquelles une date est invalide.

Si vous souhaitez une erreur plus détaillée, vous pouvez ajouter à la méthode getValidDateObject().

les dates sont ajoutées au tableau par leur valeur en millisecondes depuis le 1er janvier 1970 à minuit, qui est intégré au javascript conformément au w3schools. Cela permet de trier correctement les dates, pas seulement de comparer des chaînes. En outre, une fois que vous travaillez avec des objets de date réelle, vous pouvez changer la méthode getShortDateString() pour la renvoyer dans n'importe quel format!

Html Bloc

 Test Values<br /> 
     <input type="text" name="date_1" class="dataList" value="2009-12-30"> 
     <input type="text" name="date_2" class="dataList" value="2007-06-12"> 
     <input type="text" name="date_3" class="dataList" value="2009-10-23"> 
     <br /> 
     Max Date  
     <input type="text" name="date_max" class="result" value=""> 
     <br /><br /> 
     <a href='javascript:getMax();'>Find Max Date</a>

Fonction principale

function getMax(){ 

    var dates = new Array();  
    var dateStrings = $('.dataList');  

    $.each(dateStrings , function(i, date){ 
     var strDate = $(date).val(); 
     var objDate = getValidDateObject(strDate); 

     if (!objDate){ 
      $("input[name$='date_max']").val('0000-00-00'); 
      throw new Error('Invalid Date: ' + strDate); 
     } 

     dates[i] = objDate.getTime();   
    }); 

    dates.sort(); 
    dates.reverse(); 

    var d2 = new Date(dates[0]); 
    var maxDateString = getShortDateString(d2); 

    $("input[name$='date_max']").val(maxDateString);  
}

Retour une date valide Objet

function getValidDateObject(strDate){ 

    strDate = strDate.replace(/[-]/g,'/') 
var objDate = new Date(strDate); 

    if (objDate == 'Invalid Date') { 
     alert('bad input: ' + strDate);   
     return false; 
    } 
    return objDate; 
}

Retour une date au format chaîne

function getShortDateString(objDate){ 
     var y = objDate.getFullYear(); 
     var m = objDate.getMonth() + 1; 
     var d = objDate.getDate(); 

     if (m < 10) m = "0" + m; 
     if (d < 10) d = "0" + d; 

     var strDate = y + '-' + m + '-' + d; 

     return strDate; 
}

Source

2009-11-17 00:00:55

Ajouter une liste de dates pour tableau, valider et obtenir la valeur max

Répondre

Questions connexes