如何禁用 uib-timepicker 箭头键？

Question

即使在我使用它之后它仍然显示箭头

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

这里是 plunker : https://plnkr.co/edit/j5JlXWsoldsj0iEdSUMY?p=preview

如何禁用它们？有谁知道？他们的文档指出可以隐藏箭头。这是一个错误吗？

Angular Bootstrap 时间选择器插件：link

谢谢

Answer 1

其实我们这边对uib-timepicker的arrowkeys属性有个小小的误解。实际上，设置 arrowkeys="false" 不会隐藏方向键，而是会阻止文本框内的上下方向键事件。在设置 arrowkeys="true" 时，您可以通过向上和向下箭头键增加或减少时间值，将其设置为 false 时不会发生。

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

要实现您的要求，您需要进行黑客攻击。

我不知道这是不是最好的方法，但是隐藏上下箭头怎么样。如果这可以解决您的问题，我附上了示例代码。

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

只需添加一个 div 和一个 class 作为时间选择器的容器说 timepickercontainer

然后设置

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

Answer 2

如果您谈论的是小时、分钟和（可选）秒输入字段上方和下方的小向上和向下箭头，您实际上想要在指令中设置 show-spinners="false"。

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

arrowkeys 设置仅用于设置焦点在文本字段中时是否可以按键盘上的向上和向下箭头来增加或减少值。

如何禁用 uib-timepicker 箭头键？

How to disable uib-timepicker arrow keys?

angular-bootstrap