如何在kendo-time-picker中进行默认时间选择
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在kendo-time-picker中进行默认时间选择相关的知识，希望对你有一定的参考价值。
我在我的角度js项目中使用kendo-time-picker。下拉默认值为空。但是，当我打开下拉列表时，它应该是第一次显示上午8:00。我怎样才能做到这一点。
以下是我的代码段。
<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">
答案
您可以使用scrollTop()函数，如下所示：
<!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>另一答案
您可以使用k值属性并设置默认值
DEMO
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.getType = function(x) {
return typeof x;
};
$scope.isDate = function(x) {
return x instanceof Date;
};
$scope.value = '08:00 AM';
})<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/datetimepicker/angular">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.default.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/angular.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div class="demo-section k-content" ng-controller="MyCtrl">
<h4>Select time:</h4>
<input kendo-time-picker="dtp"
k-value="'08:00 AM'"
ng-model="value"
style="width: 100%;" />
{{value}}
</div>
</div>以上是关于如何在kendo-time-picker中进行默认时间选择的主要内容，如果未能解决你的问题，请参考以下文章