Setting min/max attribute to today for a date input widget

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">
        <label for="min">min today</label>
        <input class="min-today" id="min" type="date" placeholder="YYYY-MM-DD" data-date-split-input="true" />
    </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

webshims.setOptions('forms-ext', {
    replaceUI: 'auto',
    types: 'date'
});
webshims.polyfill('forms forms-ext');

$(function(){
    $('[type="date"].min-today').prop('min', function(){
        return new Date().toJSON().split('T')[0];
    });
});