I'm using kendo-time-picker
in my angular js project. The dropdown default is blank. But, when i open the dropdown it should show 8:00 AM as a first time. How can i achieve that.
Below is my code snippet.
<input class="form-control kendotimepicker" name="StartTimeVal" kendo-time-picker
ng-model="startTimeValModel"
ng-change="startTimeChange(startTimeValModel)"
ng-required=true
ng-pattern="/^(0?[1-9]|1[012])(:[0-5]\d) [AP][M]$/"
interval="5"
title="hh:mm AM/PM">
You can use the scrollTop()
function, like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
</head>
<body>
<input id="timepicker" />
<script>
$("#timepicker").kendoTimePicker({
open: function(e) {
if (!e.sender.value()) { // Run only if no value was selected
setTimeout(() => {
let containerElement = e.sender.timeView.list;
let listElement = containerElement.children().first();
containerElement.scrollTop(listElement.height() * 8 / 24)
}, 0);
}
}
});
</script>
</body>
</html>