<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>
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]; }); });
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; } }