Question

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

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

这是羽毛球：https://plnkr.co/edit/j5JlXWsoldsj0iEdSUMY?p=preview

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

Angular Bootstrap timepicker插件：link

谢谢

Answer 1

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

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

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

Answer 2

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

arrowkeys（默认值：true）：用户是否可以使用向上/向下箭头键在小时里面分钟输入增加或减少它的值。

为了满足您的要求，您需要进行攻击。

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

<!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作为时间选择器的容器timepickercontainer

然后设置

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

如何禁用uib-timepicker箭头键？

2 个答案: