angularjskendo-uitelerikkendo-angular-uikendo-timepicker

How to make default time selection in kendo-time-picker


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

Solution

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