Kendo UI Integration with HTML5 Input Types

Testing the integration of Kendo UI and various HTML5 input types.

by jbristowe

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<table>
    <thead>
        <tr>
            <th>Type</th>
            <th>Native</th>
            <th>Kendo UI</th>
        </tr>
    </thead>
    <tbody> 
        <tr>
            <td>date</td>
            <td><input type="date" /></td>
            <td><input type="date" id="kendoDate" /></td>
        </tr>
        <tr>
            <td>month</td>
            <td><input type="month" /></td>
            <td><input type="month" id="kendoMonth" />
        </tr>
        <tr>
            <td>range</td>
            <td><input type="range" /></td>
            <td><input type="range" id="kendoRange" /></td>
        </tr>
        <tr>
            <td>number</td>
            <td><input type="number" /></td>
            <td><inpyt type="number" id="kendoNumber" /></td>
        </tr>
        <tr>
            <td>time</td>
            <td><input type="time" /></td>
            <td><input type="time" id="kendoTime" /></td>
        </tr>
    </tbody>
</table>

CSS

td {
    padding: 10px;
}

td, th {
    text-align: center;
}

JavaScript

$('#kendoDate').kendoDatePicker({
    format: "yyyy-MM-dd"
});
$('#kendoMonth').kendoDatePicker({
    depth: 'year',
    start: 'year',
    format: "yyyy-MM"
});
$("#kendoRange").kendoSlider();
$("#kendoNumber").kendoNumericTextBox();
$("#kendoTime").kendoTimePicker({
    interval: 1,
    format: "HH:mm"
});