Kendo UI Mobile base

by klaudyuxxx

HTML

<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1113/styles/kendo.mobile.all.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.default.min.css">
<div data-role="view">
    <div data-role="scrollview">
        <div data-role="page">sv 1
            <ul id="buttongroup" data-select="selectButton" data-index="0"> 
                <li data-icon="rewind"></li>
                <li><input id="datePicker" value="2/7/2013"/></li>
                <li data-icon="fastforward"></li>
            </ul>
            some content
        </div><div data-role="page">sv 2
        <span id="buttonsContainer">
                <a data-role="button" data-icon="rewind"></a>
                <input id="datePicker2" value="31/07/2013"/>
                <a data-role="button" data-icon="fastforward"></a>
            </span>
        content of sv 2
        </div><div data-role="page">sv 3
        </div>
    </div>
</div>

CSS

#datePicker{
    width:120px;
}
#buttonsContainer{
    display: block; 
    margin: 0 auto; 
    text-align: center;
}

JavaScript

new kendo.mobile.Application();

$("#datePicker").kendoDatePicker();
$("#datePicker2").kendoDatePicker();
$("#buttongroup").kendoMobileButtonGroup();
function selectButton(e){
    console.log(e);
}