Configuration of Webshims input widgets

by trixta

HTML

<script src="http://afarkas.github.io/webshim/js-webshim/minified/polyfiller.js"></script>
<div class="wrapper">
    <p><a href="http://afarkas.github.io/webshim/demos/index.html#Forms-forms-ext">webshims form widget documentation</a></p>
    <form class="ws-validate">
        <div class="form-row date-time">
            <label for="date-time">date + time</label>
            <input id="date-time" type="date" />
            <input type="time" />
        </div>
        <div class="form-row date-time">
            <label for="datetime-local">datetime-local</label>
            <input id="datetime-local" type="datetime-local" />
        </div>
        
    </form>
    <p>This example uses <a href="http://afarkas.github.io/webshim/demos/index.html">webshims</a>. All input widgets do follow <a href="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices</a>

    </p>
    <ul>
        <li><a href="http://afarkas.github.io/webshim/demos/demos/cfgs/input-date.html" target="_blank">datepicker configurator</a>
        </li>
        
        <li><a href="http://afarkas.github.io/webshim/demos/demos/cfgs/input-time.html" target="_blank">timepicker configurator</a>
        </li>
        <li><a href="http://afarkas.github.io/webshim/demos/demos/cfgs/input-datetime-local.html" target="_blank">datetimepicker configurator</a>
        </li>
    </ul>
</div>

CSS

.wrapper {
    margin: 10px auto;
    padding: 5px 10px;
    max-width: 600px;
    min-width: 300px;
    width: 90%;
}
.form-row {
    padding: 10px;
}
label {
    display: block;
    margin: 3px 0;
}
.form-row input {
    width: 220px;
    padding: 3px 1px;
}
.date-time input[type="date"] {
    width: 130px;
}
.date-time input[type="time"] {
    width: 85px;
}

JavaScript

webshim.setOptions('forms-ext', {
    replaceUI: 'auto',
    types: 'date time',
    widgets: {
        startView: 2
    }
});
webshim.polyfill('forms forms-ext');