CODEWITHSUNDEEP
angular-bootstrap
DennyHiu
DennyHiu

Reputation: 6060

How to disable uib-timepicker arrow keys?

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

Upvotes: 3

Views: 4944

Answers (2)

Jordan
Jordan

Reputation: 32522

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.

Upvotes: 6

Nitheesh
Nitheesh

Reputation: 19986

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;
 }

Upvotes: 1

Related Questions