Holen Sie sich input-Wert von HTML5 input[type="date"] in chrome

In Chrom, ein tag wie

<input id="picker" type="date">

macht so ein text-Feld. Jedoch, ruft die versuchen, um seinen Wert mit so etwas wie

$("#picker").val()

gibt nichts zurück, bis ein gültiges Datum eingegeben wird oder abgeholt aus der dropdown-Liste.
Ich nahm einen Blick auf der Objekt der unmittelbaren Eigenschaften auf einen Tastendruck mit

$("#picker").keypress(function() {
    var output = ""
    for (var i in this) {       
        output += i +" value:"+ this[i] + "\n";
    }
    alert(output);
});​

konnte aber nicht sehen, mein input in diesen. Prüfen Sie selbst, http://jsfiddle.net/5cN2q/

Meine Frage ist: Ist es möglich, den text aus einem input[type="date"] in chrome, wenn die Eingabe kein gültiges Datum?

InformationsquelleAutor MaxPRafferty | 2012-11-07

  1. 4

    Den W3C-Date-State-spec definiert die Bereinigung Algorithmus:

    • Der Wert-Bereinigung-Algorithmus ist wie folgt: Wenn der Wert des Elements ist keine gültige Datums-Zeichenfolge, dann legen Sie es auf die leere Zeichenfolge statt.

    Die wird aufgerufen, wenn der Wert des input-Elements, wie definiert in DOM Eingangswert spec:

    • Auf immer, es muss wieder der aktuelle Wert des Elements. Auf die Einstellung, es muss das element den Wert auf den neuen Wert gesetzt, der
      element ' s dirty flag mit dem Wert true, berufen sich auf die Wert-Bereinigung
      Algorithmus      , wenn das element type-Attribut den derzeitigen Zustand definiert
      und dann, wenn das element hat einen text-Eintrag cursor-position, sollte
      bewegen Sie den Texteingabe-cursor-position bis zum Ende des Textfeldes
      deaktivieren Sie alle ausgewählten text und zurücksetzen der Richtung zur Auswahl
      keine.

    Also die value Eigenschaft wird immer ein leerer string, wenn das Datum nicht gültig ist. Es scheint nicht zu sein jede Eigenschaft für "original/dirty/Benutzer eingegebene text-Wert" angegeben, da es nicht eine text-Eingabe, nachdem alle.

    IMO ist es eine gute Sache, es erleichtert die Formular-Validierung als ungültige Daten behandelt werden, als falsy-Werte (leere strings), es lässt auch Browser mehr frei implementieren Sie die Benutzeroberfläche für Datums-Eingaben.

    Wenn Sie lieber eine nicht-W3C-Datum eingegeben haben, können Sie verwenden Sie einen text-Eingabe mit der guten alten JS Datum der Validierung und einen datepicker, wie die jQuery UI datepicker. Dies würde ermöglichen es Ihnen, zum abrufen der eigentliche text mit dem Wert des input-und ist viel mehr cross-browser-Lösung.

    Ah. Macht das genug Sinn gegeben, was ich sah. Mein Anliegen mit Chrome die Umsetzung ist die mangelnde Fähigkeit, eigene Validierung; Ihre textbox-basierte Implementierung gibt dem Benutzer die Möglichkeit zu geben beliebige Zeichenfolge, die Sie mögen, aber gibt mir keine Möglichkeit zu helfen, als um zu überprüfen, ob val() === "" und alert.
    Ich bin mit Chrome Canary im moment (Version 25), diese version hat eine sehr robuste Validierung, die nicht erlauben die Eingabe eines ungültigen Datums-Werte (anders als die aktuelle stable). Hoffentlich wird es umgesetzt, in dem stable-release schon bald, und andere Browser werden hoffentlich noch Folgen. =]

    InformationsquelleAutor Fabrício Matté

  2. 4

    Als die andere Antwort Sie nicht sehen können, der ursprüngliche Wert, Sie können jedoch verarbeiten-Validierung mit ValidityState

    <script type="text/javascript">
function submitform()
{
  var inputdate = document.getElementById("inputdate")
  //check if date is valid.
  //you can use `inputdate.validity.valid` too.
  if(inputdate.validity.badInput) {
    //error message from the browser
    document.getElementById("message").innerHTML = inputdate.validationMessage
  }
  //document.myform.submit();
}
</script>

<div>message: </div><div id="message" style="color: red; font-weight:bold;"></div>
<form method=post action="./post">
  <input type="date" id="inputdate" value="2016-02-29">
  <a href="javascript: submitform()">get date!</a>
</form>

    Wenn Sie ändern Sie den Tag auf 30 und klicken Sie auf den link, Sie werden sehen, eine Fehlermeldung.

    Genießen.

    InformationsquelleAutor lamusique

Schreibe einen Kommentar