Wie verwende ich HTML5, um einen Datumsbereich zu validieren?

Question

Alternativ ist es möglich mit html5 gegen den Wert eines anderen Feldes zu validieren?

Ein häufiges Beispiel wäre die Auswahl eines Datumsbereichs, in dem das "von" Datum kleiner oder gleich dem "bis" Datum sein sollte. Im Folgenden würde beschrieben die gewünschte Beziehung zwischen den Werten, wenn nur Sie Elementreferenzen in Syntax verwenden:

<input type="date" name="from" max="to"> //todo: populate with ~to.value 
<input type="date" name="to" min="from"> //todo: populate with ~from.value 

Answer 1

Es ist möglich, html5 Validierungsmechanismus mit einigen Javascript zu verwenden, dynamisch min/max Attribute zu aktualisieren:

//in this case a single input restriction is sufficient to validate the form: 

$('#from, #to').on('change', function(){ 
    $('#to').attr('min', $('#from').val()); 
}); 

Fiddled. Sowohl min als auch max können auf die entsprechenden Felder für erweitertes UX angewendet werden, wenn die Browserimplementierung eines Datepickers Bereichsbeschränkungen respektiert (indem Daten außerhalb des gewünschten Bereichs deaktiviert werden)

Answer 2

Ich mache mir Sorgen, dass es keine Möglichkeit gibt, ein zu validieren Eingabewert basierend auf anderen Eingabewerten. Nur gutes altes Javascript.

Aber vielleicht können Sie <input type="range" …> verwenden und einen minimalen Schritt (1 Tag/1 Stunde/...) einstellen. Dann können Sie min und max Wert von gleichnamigen Attributen verwenden.

Answer 3

Hier sind Web Components sehr nützlich, aber sie werden noch nicht vollständig in allen Browsern unterstützt.

Die Idee ist es, eine einfache HTML-Element, mit zwei Kindern zu schaffen (von und nach) wie folgt zusammen:

<div id="fromToDate"> 
    <div></div> 
    <div></div> 
</div> 

dann eine Vorlage erstellen, die definiert, wie die Datumsauswahl aussehen sollte:

<template id="fromToDateTemplate"> 
    <label for="fromDate">from</label> 
    <input type="date" class="fromDate" select=":first" required="" /> 
    <label for="toDate">to</label> 
    <input type="date" class="toDate" select=":last" required="" /> 
</template> 

Der Select-Parameter definiert, woher der Wert genommen wird, also nimmt das erste Eingabefeld das erste Div von "#fromToDate".

Zuletzt haben wir den „Schatten root“ bevölkern und die Logik definieren:

var shadow = document.querySelector('#fromToDate').webkitCreateShadowRoot(), 
    template = document.querySelector('#fromToDateTemplate'); 
shadow.appendChild(template.content); 


shadow.querySelector(".fromDate").addEventListener("change", function (e) { 
    var to = this.value; 

    shadow.querySelector(".toDate").setAttribute("min", this.value); 
}); 

template.remove(); 

am Ende zwei Eingabefelder sind renderd und wenn ein Datum in den ersten picker Auswahl, kann der zweite picker nicht Wählen Sie irgendwelche niedrigeren Daten.

Fiddler Beispiel: http://jsfiddle.net/cMS9A/

Vorteile:

• Bauen als Widget
• Leicht
• reause nicht Seiten brechen
• unabhängig

gestylt werden Nachteil ges:

• Noch nicht

Zukunft Lesen in allen Browsern unterstützt:

• http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
• http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/
• https://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html

Answer 4

Wenn Sie Fragen zu vermeiden, mit jemand Hacking/yor Website Absturz - Eingangsdaten mit bestätigen:

• (optional) javascript bevor ein Formular (schützt vor malforming Daten mit Hilfe von Javascript zu senden, falsche einer Eingabe reduziert Verkehr)
• (Pflicht) auf Server-Seite (schützt vor cleveren Jungs, die Dateneingabe mit Fiedler zum Beispiel malform könnte)

Dies ist der einzigen (mindestens zweiter Punkt) App Plötze, die dich und deine Site schützt.

Answer 5

Es ist großartig zu sehen, wie sich die Dinge in Richtung einer reinen HTML-Lösung entwickeln ... aber warum sollte man sich nicht kurz mit moment.js beschäftigen, um die Lücken zu füllen?

http://momentjs.com/

Es gibt viele gute Beispiele gibt und viele nützliche Utility-Methoden.