Configuration of Webshims input widgets

by Avi Algaly

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 show-activevaluetooltip ">
            <label for="range">range with: .show-activevaluetooltip</label>
            <input type="range" data-range='{"animate": true}' />
        </div>
        <div class="form-row animate-2">
            <label>.animate-2 and required with: {"startView": 2, "openOnMouseFocus": true}
                <input type="date" required="" data-date='{"startView": 2, "openOnMouseFocus": true}' placeholder="yyyy-mm-dd" />
            </label>
        </div>
        <div class="form-row">
            <label for="date-1">date with: {"startView": 2}, .inputbtns-outside.hide-spinbtns and min/max/placeholder attributes</label>
            <input id="date-1" type="date" data-date='{"startView": 2}' placeholder="yyyy-mm-dd" min="2012-11-01" max="2019-10-01" class="inputbtns-outside hide-spinbtns" />
        </div>
        <div class="form-row">
            <label for="date-2">date with: {"splitInput": true} and datalist</label>
            <input id="date-2" type="date" list="dlist" data-date='{"splitInput": true}' list="datalist" />
            <datalist id="dlist" data-label="Suggestions">
                <select>
                    <option value="2010-12-10" />
                    <option value="2011-05-12" />
                    <option value="2011-11-12" />
                </select>
            </datalist>
        </div>
        <div class="form-row">
            <label for="date-3">date with: {"openOnFocus": true}</label>
            <input id="date-3" type="date" data-date='{"openOnFocus": true}' />
        </div>
        <div class="form-row show-selectnav show-week hide-btnrow">
            <label for="date-4">date with...

CSS

body {
    font-family: sans-serif;
}
.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;
}
.currency-style input {
    text-align: right;
}
[class*="animate-"] .ws-popover {
    overflow: visible;
}
[class*="animate-"] .ws-popover.ws-po-visible .ws-po-outerbox {
    opacity: 1;
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
}
.animate-2 .ws-popover {
    overflow: visible;
    -webkit-perspective: 600px;
    -webkit-transform-style: preserve-3d;
    perspective: 600px;
    transform-style: preserve-3d;
}
.animate-2 .ws-po-outerbox {
    -webkit-transform: rotateX(-60deg);
    -webkit-transform-origin: 50% 0 0;
    transform: rotateX(-60deg);
    transform-origin: 50% 0 0;
}
.animate-2 [data-vertical="bottom"] .ws-po-outerbox {
    -webkit-transform: rotateX(60deg);
    -webkit-transform-origin: -50% 100% 0;
    transform-origin: -50% 100% 0;
    transform: rotateX(60deg);
}

JavaScript

webshim.setOptions('forms-ext', {
    replaceUI: 'auto'
});

//set language/UI dateformat || or use lang attribute on html element
//webshims.activeLang('hu'); // hu == hungary

webshim.polyfill('forms forms-ext');


$(function () {
    $('.check-validity').on('click', function () {
        $(this).jProp('form').checkValidity();
        return false;
    });
});