How to disable uib-timepicker arrow keys?

Question

even after I use this it still showing up arrows

  <div uib-timepicker ng-model="mytime" arrowkeys="false" show-meridian="false"></div>

Here's the plunker : https://plnkr.co/edit/j5JlXWsoldsj0iEdSUMY?p=preview

How to disable them ? Anyone knows? Their documentation states that arrows can be hidden. Is this a bug?

Angular Bootstrap timepicker plugin: link

Thank you

score 6 · Accepted Answer · answered Dec 07 '16 at 04:01

6

If you're talking about the little up and down arrows above and below the hours, minutes, and (optionally) seconds input fields, you actually want to set show-spinners="false" on the directive.

<div uib-timepicker ng-model="myDate" show-spinners="false"></div>

The arrowkeys setting is just for whether you can press up and down arrows on the keyboard while focused within the text field to increase or decrease the values.

answered Dec 07 '16 at 04:01

Jordan

31,971
6
56
67

1

was confused `arrowkeys` and `show-spinners` ., thnkz for the answer – User_3535 Aug 04 '17 at 07:02

Nitheesh · Answer 2 · 2016-12-06T09:16:15.633

Actually there is a small misunderstanding happened from our side regarding the arrowkeys attribute of uib-timepicker. Actually while setting arrowkeys="false" will not hide the arrow keys instead it will block the up and down arrow key events inside the text box. On setting arrowkeys="true", you can increment or decrement the time values by up and down arrow keys, on setting it to false it wont happen.

arrowkeys (Defaults: true) : Whether user can use up/down arrowkeys inside the hours & minutes input to increase or decrease it's values.

To achieve your requirement you will need to go for a hack.

I don't know whether this is the best way or not, but what about hiding the up and down arrows. If this could solve your problem, I have attached a sample code.

<!doctype html>
<html ng-app="ui.bootstrap.demo">

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.9/angular-sanitize.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.3.0/ui-bootstrap-tpls.min.js"></script>
    <script>
        angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
        angular.module('ui.bootstrap.demo').controller('TimepickerDemoCtrl', function ($scope, $log) {
            $scope.mytime = new Date();

            $scope.hstep = 1;
            $scope.mstep = 15;

            $scope.options = {
                hstep: [1, 2, 3],
                mstep: [1, 5, 10, 15, 25, 30]
            };

            $scope.ismeridian = true;
            $scope.toggleMode = function () {
                $scope.ismeridian = !$scope.ismeridian;
            };

            $scope.update = function () {
                var d = new Date();
                d.setHours(14);
                d.setMinutes(0);
                $scope.mytime = d;
            };

            $scope.changed = function () {
                $log.log('Time changed to: ' + $scope.mytime);
            };

            $scope.clear = function () {
                $scope.mytime = null;
            };
        });
    </script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        .timepickercontainer .uib-timepicker .btn-link {
            display: none;
        }
    </style>
</head>

<body>

    <div ng-controller="TimepickerDemoCtrl">
        <div class="timepickercontainer">
            <div uib-timepicker ng-model="mytime" ng-change="changed()" arrowkeys="false" hour-step="hstep" minute-step="mstep" show-meridian="false"></div>
        </div>
        <pre class="alert alert-info">Time is: {{mytime | date:'shortTime' }}</pre>

        <div class="row">
            <div class="col-xs-6">
                Hours step is:
                <select class="form-control" ng-model="hstep" ng-options="opt for opt in options.hstep"></select>
            </div>
            <div class="col-xs-6">
                Minutes step is:
                <select class="form-control" ng-model="mstep" ng-options="opt for opt in options.mstep"></select>
            </div>
        </div>

        <hr>

        <button type="button" class="btn btn-info" ng-click="toggleMode()">12H / 24H</button>
        <button type="button" class="btn btn-default" ng-click="update()">Set to 14:00</button>
        <button type="button" class="btn btn-danger" ng-click="clear()">Clear</button>

    </div>
</body>

</html>

Just add a div with a class as the container of time picker say timepickercontainer

then set

 .timepickercontainer .uib-timepicker .btn-link {
     display: none;
 }

Thank you, but its like a hack, I wish there is cleaner solution. This must be a bug from the angular-bootstrap team. They explicitly state in their documentation that arrow keys can be hidden. — DennyHiu, Dec 06 '16 at 07:38
In the angular documentation it states that you can prevent the arrow key events inside the input field. — Nitheesh, Dec 06 '16 at 09:17

How to disable uib-timepicker arrow keys?

2 Answers2