2016-08-03 28 views
-1

eingegeben werden Im Moment habe ich:Wie kann ich ein Formularfeld mit dem angegebenen Muster in html machen (MM/DD/YYYY), das fügt ein „/“ automatisch nach zwei ganzen Zahlen

<input type="text" wicket:id="singleDateField" pattern="(?:(?:0[1-9]|1[0-2])[\/\\-. ]?(?:0[1-9]|[12][0-9])|(?:(?:0[13-9]|1[0-2])[\/\\-. ]?30)|(?:(?:0[13578]|1[02])[\/\\-. ]?31))[\/\\-. ]?(?:19|20)[0-9]{2}"/> 

Aber ich brauche die Form, um eine / nach zwei Zahlen eingegeben werden, fügen Sie dann eine / nach zwei weiteren Zahlen eingegeben werden, und dann keine weitere Eingabe nach der 4-stelligen Jahr eingeben eingeben. Ich möchte, dass die Formatierung vorher festgelegt wird, so dass eine Fehlermeldung nicht notwendig ist und der Benutzer kein inakzeptables Datum eingeben kann.

Ich hoffe, das macht Sinn ich könnte die Hilfe nutzen!

Antwort

-1

Sie können die Funktion verwenden, die bei jeder Ausgabe von "oninput" aufgerufen wird. In dieser Funktion müssen Sie nach Tagen und Monaten einen Schrägstrich hinzufügen. Um das Hinzufügen von Zeichen nach Jahren zu verhindern, verwenden Sie maxlength in der Eingabe.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <script> 
     function AddSlash(input){ 
      var dataString=input.value; //get input value 
      if(dataString[dataString.length-1]=='/') //slash already is 
        return; 

      while(dataString.indexOf('/')!=-1) //remove slash 
       dataString=dataString.replace('/', ''); 
      var newDataString=dataString.substring(0, 2); //copy days 
      if(dataString.length>2) //add slash after days 
      { 
       newDataString+='/'; 
       newDataString+=dataString.substring(2, 4); //copy months 
       if(dataString.length>4) //add slash after months 
       { 
        newDataString+='/'; 
        newDataString+=dataString.substring(4, 8); //copy years 
       } 
      } 

      input.value=newDataString; //change input text 
     } 
    </script> 
</head> 
<body> 
    <form> 
     <input id="dataInput" 
      oninput="AddSlash(this)" 
      maxlength="10" 
      pattern="^(?:(?:31(\/)(?:0[13578]|1[02]))\1|(?:(?:29|30)(\/)(?:0[1,3-9]|1[0-2])\2))\d{4}$|^(?:29(\/)(?:02)\3(?:(?:\d{2}(?:0[48]|[2468][048]|[13579][26])|(?:(?:[2468][048]|[13579][26])00))))$|^(?:0[1-9]|1\d|2[0-8])(\/)(?:(?:0[1-9])|(?:1[0-2]))\4\d{4}$" /> 
    </form> 
</body> 
</html> 
+0

Einige Erklärungen, wenn Sie eine Antwort posten, sind wünschenswert. Was hast du geändert und warum? – Michelangelo