<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>
webshim.setOptions('forms-ext', { replaceUI: 'auto', types: 'date time', widgets: { startView: 2 } }); webshim.polyfill('forms forms-ext');
.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; }