Edit in JSFiddle

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

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

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