Scrollable TimePicker

by vrluckyin India

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.web.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.mobile.min.js"></script>
<div>
Kendo kendoTimePicker
by vrluckyin
</div>
<input id="timepicker" />

CSS

.km-touch-scrollbar {
  position: absolute;
  visibility: hidden;
  z-index: 200000;
  height: .3em;
  width: .3em;
  background-color: #333;
  opacity: 0;
  border-radius: 0.4em;
  -moz-border-radius: 0.4em;
  -webkit-border-radius: 0.4em;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transition: opacity 0.3s linear;
  -moz-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
}
.km-vertical-scrollbar {
  height: 100%;
  right: 1px;
  top: 0;
}
.km-horizontal-scrollbar {
  width: 100%;
  left: 0;
  bottom: 1px;
}
.km-scroll-container {
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-margin-collapse: separate;
}
.km-android .km-touch-scrollbar {
  background-color: #33b5e5;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
}

JavaScript

var data = [];

//$("#timepicker").kendoTimePicker();
kendo.culture().calendars.standard.AM[0] = 'am';
kendo.culture().calendars.standard.PM[0] = 'pm';
$("#timepicker").kendoTimePicker({
            parseFormats: ["HH:mm"],
            format: "HH:mmtt",
            change: function (e) {
               
            },
        });