How to use HTML5 to check date range?

Question

Alternatively, is it possible to check a different field value using html5?

A common example would be to select a date range in which the "from" date should be less than or equal to the "to" date. The following describes the desired relationship between the values ​​if you could use item references in the syntax:

<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

Web components are very useful here, but they are not yet fully supported in all browsers.

The idea is to create a simple html element with two children (from and to) as follows:

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

then create a template that defines what the date caretaker should look like:

 <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> 

the select parameter determines where the value is taken from so that the first input field takes the first div from "#fromToDate".

Finally, we need to fill in the "shadow root" and define the logic:

 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(); 

At the end, the two input fields are renderd and when selecting a date in the first datepicker, the second datepicker cannot select any lower data.

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

Benefits:

• Build as a widget
• Easy to repeat
• won't paginate
• can be issued independently

Disadvantages:

• Not supported in all browsers.

Future reading:

• 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 2

You can use the html5 validation mechanism with some javascript to dynamically update the min / max attributes:

 //in this case a single input restriction is sufficient to validate the form: $('#from, #to').on('change', function(){ $('#to').attr('min', $('#from').val()); }); 

Tucked away . Both min and max can be applied to the corresponding fields for extended UX if the datepicker browser implementation complies with the range restrictions (by disabling dates outside the required range)

Answer 3

If you want to avoid problems with someone hacking / crashing the yor website, check the input with:

• ( optional ) javascript before submitting the form (protects against data corruption with javascript, enters incorrect, reduces traffic)
• ( mandatory ) on the server side (protects against smarter guys who can distort input, for example, using a violinist)

This is the only (at least second) approach that protects you and your site.

Answer 4

It's great to see that everything is moving towards a pure HTML solution ... but why not take a look at using the .js moment to fill in the gaps for a while?

http://momentjs.com/

There are many good examples and many useful useful methods.

Answer 5

I am worried that there is no way to check the input value based on another input value. Only good old javascript.

But maybe you can use <input type="range" …> and set the minimum step (1 day / 1 hour / ...). Then you can use the min and max values ​​using attributes with the same name.