How to use HTML5 to validate a date range?

Question

Alternatively, is it possible to validate against another field's value with html5?

A common example would be selecting a date range where "from" date should be less than or equal to "to" date. The following would described the desired relationship between the values, if only you could use element references in 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

It's possible to utilize html5 validation mechanism with some javascript to dynamically update 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());
});

Fiddled. Both min and max could be applied to the respective fields for enhanced UX if browser implementation of a datepicker respects range limitations (by disabling dates outside of the desired range)

Answer 2

Here, Web Components are very useful, however they are not full supported in all browsers yet .

The idea is to create a simple html Element, with two children (from and to) as the following:

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

then create a template, which defines how the date picker should look:

<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 defines, where the value is taken from so the first input field takes the first div from the "#fromToDate".

Last we have to populate 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();

In the end two input fields are renderd and when selecting a date in the first datepicker, the second datepicker can't pick any lower data.

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

Advantages:

• Build as widget
• Easy to reause
• won't break pages
• can be styled independently

Disadvantages:

• Not supported in all browsers yet

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