creating a date range with two input type date widgets

by trixta

HTML

<script src="http://afarkas.github.io/webshim/js-webshim/minified/polyfiller.js"></script>
<form action="#" class="ws-validate">
    <div class="form-row">
        <!-- max of the first date equals value of the second --> <!-- mmin of the second date equals value of the first --> 
        <input data-dependent-validation='{"from": "date-to", "prop": "max"}' type="date" id="date-from" placeholder="from" /> 
        <input data-dependent-validation='{"from": "date-from", "prop": "min"}' type="date" id="date-to" placeholder="to" /> 
    </div>
	<div class="form-row">
		<input type="submit" />
	</div>
</form>
<p><a href="http://afarkas.github.io/webshim/demos/demos/cfgs/input-date.html" target="_blank">date configurator</a>
</p>

CSS

div.ws-invalid input {
    border-color: #c88;
}
.ws-invalid label {
    color: #933;
}
div.ws-success input {
    border-color: #8c8;
}

form {
    margin: 10px auto;
    width: 600px;
    border: 1px solid #000;
    padding: 10px;
    
}
.form-row {
    padding: 5px 10px;
    margin: 5px 0;
}
label {
    display: block;
    margin: 3px 0;
}
.form-row input {
    width: 220px;
    padding: 3px 1px;
    border: 1px solid #ccc;
    box-shadow: none;
}
.form-row input[type="checkbox"] {
    width: 15px;
}
}

JavaScript

webshim.setOptions('forms', {
    lazyCustomMessages: true,
    addValidators: true
});
webshim.setOptions('forms-ext', {
    replaceUI: 'auto',
    types: 'date',
    date: {
        startView: 2,
        size: 2,
        classes: 'hide-spinbtns'
    }
});

//start polyfilling
webshim.polyfill('forms forms-ext');

//initial max/min attributes should be done serverside.
$(function(){
    $('#date-from, #date-to').prop('min', function(){
        return new Date().toJSON().split('T')[0];
    });
});