如何在 kendo-time-picker 中进行默认时间选择答案

【问题标题】：How to make default time selection in kendo-time-picker如何在 kendo-time-picker 中进行默认时间选择
【发布时间】：2019-08-28 04:32:51
【问题描述】：

我在我的 Angular js 项目中使用kendo-time-picker。 下拉菜单默认为空白。但是，当我打开下拉菜单时，它应该第一次显示 8:00 AM。我怎样才能做到这一点。

下面是我的代码 sn-p。

<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">

【问题讨论】：

标签： angularjs kendo-ui telerik kendo-angular-ui kendo-timepicker

【解决方案1】：

你可以使用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>

【讨论】：

【解决方案2】：

可以使用k-value属性并设置默认值

演示

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>

【讨论】：

感谢您的回答，但我看起来像这样。最初的下拉值应该是空白的。点击它应该突出显示或作为第一个选项上午 8:00 而不是上午 12:00。
你需要去掉默认值，然后写一个事件处理器来处理它
请提供示例代码..您能否使用处理程序更新您的答案。