webshim.setOptions('forms', {
lazyCustomMessages: true,
addValidators: true
});
webshim.setOptions('forms-ext', {
replaceUI: 'auto',
types: 'date'
});
//start polyfilling
webshim.polyfill('forms forms-ext');
$(function () {
//valuevalidation was renamed to "validatevalue"
$('input.disable-weekends').on('validatevalue', function (e, data) {
//check wether data.valueAsDate is provided
if (data.valueAsDate) {
var day = data.valueAsDate.getDay();
return !day || day == 6 ?
"Please enter only weekdays. {%value} is a weekend." : false;
}
});
});
<form action="#" class="ws-validate">
<div class="form-row">
<label for="date">only weekdays</label>
<input type="date" class="disable-weekends hide-spinbtns" data-date-start-view="2" required="" id="date" />
</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>
<p><a href="http://afarkas.github.io/webshim/demos/demos/forms.html#Custom-validity" target="_blank">about: addValidators option</a>
</p>
div.ws-invalid input {
border-color: #c88;
}
.ws-invalid label {
color: #933;
}
div.ws-success input {
border-color: #8c8;
}
form {
margin: 10px auto;
max-width: 400px;
min-width: 220px;
}
.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;
}