Using input type date for a birthdate

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 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>

CSS

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

JavaScript

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