Scrollable TimePicker

by karthick Chandran

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>
<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();