<form action="#" class="ws-validate"> <div class="form-row hide-inputbtns"> <label for="birthdate">your birthdate</label> <input class="birthdate" type="date" placeholder="YYYY-MM-DD" data-date-split-input="true" /> <p>for a birthdate a datepicker isn't important but format is, so split input into chunks and use a placeholder</p> </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-ext', { replaceUI: 'auto', types: 'date', date: {nopicker: true} }); webshim.polyfill('forms forms-ext'); //set max to today's value. Better you do this serverside :-D $(function(){ $('[type="date"].birthdate').prop('max', function(){ return new Date().toJSON().split('T')[0]; }); });
form { margin: 20px auto; width: 420px; } .form-row { padding: 5px 10px; } label { display: block; margin: 3px 0; } .form-row input { padding: 3px 1px; width: 220px; }