Как сделать выбор времени по умолчанию в kendo-time-picker

Я использую kendo-time-picker в своем проекте angular js. Раскрывающийся список по умолчанию пуст. Но когда я открываю раскрывающийся список, он должен показывать 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">

angularjs kendo-ui telerik kendo-angular-ui kendo-timepicker

06.04.2019 15:23

Знаете ли вы, что директивы являются одной из самых мощных и универсальных функций Angular?

Директивы позволяют расширять HTML новыми элементами и атрибутами и даже создавать собственные структурные директивы для манипулирования DOM. С...

Разница между Angular и React

React и AngularJS - это два самых популярных фреймворка для веб-разработки. Оба фреймворка имеют свои уникальные особенности и преимущества, которые...

1 499

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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.

— 06.04.2019 20:26

вам нужно удалить значение по умолчанию, а затем написать обработчик событий для его обработки

— 06.04.2019 21:30

Пример кода, пожалуйста... не могли бы вы обновить свой ответ с помощью обработчика.

— 06.04.2019 22:17

06.04.2019 19:50

Ответ принят как подходящий

Вы можете использовать функцию 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>

07.04.2019 13:38

Другие вопросы по теме

Как передать массив объектов в качестве входного параметра для вызова ajax с раскрывающимся списком kendo multiselect

Сетка кендо с подсеткой ClientTemplate неправильный шаблон

Page.select() в Puppeteer не работает должным образом с раскрывающимся списком кендо

Как отображать переменную JS в элементе itemTemplate пользовательского интерфейса кендо, когда значение переменной содержит пробелы

Флажок не будет проверяться с помощью стиля для флажков

Kendo Grid — условный шаблон клиента

Как исправить вид сетки

Kendo Filter не применяется, если мы связали два отдельных значения столбца в одном столбце в пользовательском интерфейсе

Как «Отфильтровать данные Kendo Grid на serverSide с помощью фильтра с несколькими флажками, в котором сделаны некоторые выборки по умолчанию»

Как передать данные строки Kendo Grid во всплывающее окно Kendo в частичном представлении в jQuery?

Как сделать выбор времени по умолчанию в kendo-time-picker

Ответы 2

Другие вопросы по теме

Похожие вопросы