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

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

Answer 2

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 3

If you want to avoid issues with someone hacking / crashing yor site - validate input data with:

• (optional) javascript before sending a form (protects against malforming data using javascript, inputting incorrect one, reduces traffic)
• (mandatory) on server side (protects against more clever guys that might malform input data using fiddler for example)

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

Answer 4

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

http://momentjs.com/

There are plenty of good examples there and a lot of useful utility methods.

Answer 5

I'm worry, that there's no chance how to validate a input value based on other input value. Only good old javascript.

But maybe you can use <input type="range" …> and set some minimal step (1 day / 1 hour / …). Then you can use min and max value by same-named attributes.