webshim.setOptions('forms-ext', {
replaceUI: 'auto',
types: 'date',
date: {
startView: 2,
inlinePicker: true,
classes: 'hide-inputbtns'
}
});
webshim.setOptions('forms', {
lazyCustomMessages: true
});
//start polyfilling
webshim.polyfill('forms forms-ext');
//only last example using format display
$(function () {
$('.format-date').each(function () {
var $display = $('.date-display', this);
$(this).on('change', function (e) {
//webshim.format will automatically format date to according to webshim.activeLang or the browsers locale
var localizedDate = webshim.format.date($.prop(e.target, 'value'));
$display.html(localizedDate);
});
});
});
<form action="#" class="ws-validate">
<h2>1 Calendars without visible input</h2>
<div class="form-row">
<input type="date" class="hide-replaced" />
</div>
<div class="form-row">
<input type="submit" />
</div>
</form>
<hr />
<form action="#" class="ws-validate">
<h2>2 Calendars without visible input</h2>
<div class="form-row">
<input type="date" class="hide-replaced" data-date-size="2" />
</div>
<div class="form-row">
<input type="submit" />
</div>
</form>
<hr />
<form action="#" class="ws-validate">
<h2>4 Calendars with visible input</h2>
<div class="form-row">
<input type="date" data-date-size="4" />
</div>
<div class="form-row">
<input type="submit" />
</div>
</form>
<hr />
<form action="#" class="ws-validate">
<h2>1 Calendars without visible input, but formatted timedisplay</h2>
<div class="form-row format-date"> <span class="date-display"></span>
<input type="date" class="hide-replaced" />
</div>
<div class="form-row">
<input type="submit" />
</div>
</form>
<hr />
<form action="#" class="ws-validate">
<h2>A normal input datepicker</h2>
<div class="form-row show-inputbtns">
<input type="date" data-date-inline-picker="false" data-date-open-on-focus="true" />
</div>
<div class="form-row">
<input type="submit" />
</div>
</form>
<hr />
<form action="#" class="ws-validate">
<h2>not an inlinePicker, but inline popup:</h2>
<div class="form-row show-inputbtns">
<input type="date" data-date-inline-picker="false" data-date-popover='{
"inline": 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>
<hr />
<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
.hide-replaced.ws-inputreplace {
display: none !important;
}
.input-picker .picker-list td > button.othermonth {
color: #888888;
background: #fff;
}
.ws-inline-picker.ws-size-2, .ws-inline-picker.ws-size-4 {
width: 49.6154em;
}
.ws-size-4 .ws-index-0, .ws-size-4 .ws-index-1 {
border-bottom: 0.07692em solid #eee;
padding-bottom: 1em;
margin-bottom: 0.5em;
}
.picker-list.ws-index-2, .picker-list.ws-index-3 {
margin-top: 3.5em;
}
div.ws-invalid input {
border-color: #c88;
}
.ws-invalid label {
color: #933;
}
div.ws-success input {
border-color: #8c8;
}
form {
margin: 10px auto;
width: 700px;
min-width: 49.6154em;
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;
}
.date-display {
display: inline-block;
min-width: 200px;
padding: 5px;
border: 1px solid #ccc;
min-height: 1em;
}
.show-inputbtns .input-buttons {
display: inline-block;
}
External resources loaded into this fiddle: