Javascript: Ajuster la date dans la zone de texte en utilisant l'événement de pression de touche

Question

J'ai une norme <input> zone de texte où les utilisateurs entrent une date. Je voudrais ajouter une fonctionnalité où les utilisateurs peuvent entrer + ou - pour ajouter/soustraire un jour de la valeur. J'ai ajouté un événement onkeypress qui appelle cette fonction:

function adjustDate(element) { 
    var e = event || window.event; 
    var code = e.charCode || e.keyCode; 

    switch(code) { 
     case 43: // user pressed "+" (plus) 
      if(isDate(element.value)) { 
       var d = new Date(); 
       d.getDate(element.value); 

       d.setDate(d.getDate() + 1); 
       element.value = (d.getMonth() + 1) + "/" + d.getDate() + "/" + d.getYear(); 
      } else { 
       var today = new Date(); 
       element.value = (today.getMonth() + 1) + "/" + today.getDate() + "/" + today.getYear(); 
      } 

      if(e.preventDefault) e.preventDefault(); 
      else e.returnValue = false; 
      return false; 

      element.select(); 

      break; 
     case 45: // user pressed "-" (minus) 
      // ... 
    } 
} 

La fonction isDate Je retirai Google et travaille, mais je peux le poster aussi si nécessaire.

Mon problème est le travail une fois, puis nada. Par exemple, si la valeur de la zone de texte est 10/1/2009, puis en appuyant sur + le fera 10/2/2009, mais aucun effet sur les plusses suivantes. Ensuite, si j'appuie sur -, il passe à 9/30/2009 au lieu de revenir à 10/1/2009 et ignore les touches moins les suivantes.

Je suis en train de tester IE8. Ceci est une application web interne donc d'autres navigateurs seraient bien mais pas nécessairement requis. Je n'utilise pas actuellement jQuery ou tout autre framework, et pour ce que cela serait probablement trop, alors je suis à la recherche d'une solution Javascript pure. En fait, cette fonctionnalité est simplement "agréable à avoir" et pas quelque chose que je dois passer beaucoup plus de temps. Je sais que je manque quelque chose ou que je fais tout à fait faux. Alors, c'est quoi?

Answer 1

Vous devez changer

var d = new Date(); 

à

var d = new Date(element.value); 

et se débarrasser de

d.getDate(element.value); 

Vous devez également déplacer votre return false; à la ligne après element.select().

Answer 2

On dirait que c'est juste logique défectueuse ici:

var d = new Date(); 

d.getDate(element.value); // HERE: what is this suppose to do? 

d.setDate(d.getDate() + 1); 
element.value = (d.getMonth() + 1) + "/" + d.getDate() + "/" + d.getYear(); 

Vous définissez essentiellement element.value demain à chaque fois.

Answer 3

La méthode getDate() dans votre exemple ne prend pas de paramètre. Il renvoie le jour du mois. Essayez donc d'assigner la valeur de la date 'actuelle' dans le constructeur.

pour cette solution:

if(isDate(element.value)) { 
    var d = new Date(element.value); 
    d.setDate(d.getDate() + 1); 
    element.value = d.toDateString(); 
} else { 
    element.value = new Date().toDateString(); 
} 

donnent également le w3c page un coup d'oeil, il contient des méthodes utiles que vous pourriez envisager.