使用 Angular js 的自定义时间选择器答案

【问题标题】：Custom Time Picker using Angular js使用 Angular js 的自定义时间选择器
【发布时间】：2014-09-22 10:26:13
【问题描述】：

我需要使用 Angular javascript 的自定义时间选择器

我在正常的下拉框中尝试了时间，这看起来不太好因为用户必须选择 3 个下拉菜单 1) 小时 2) 分钟 3) 子午线

<select type="text" ng-model="hours"> 
    <option value="00">00</option>
    <option value="01">01</option>
</select>

<select type="text" ng-model="minutes"> 
    <option value="00">00</option>
    <option value="10">10</option>
</select>

<select type="text" ng-model="meridian"> 
    <option value="AM">AM</option>
    <option value="PM">PM</option>
</select>

我打算添加一次选择器，而不是三个字段

【问题讨论】：

标签： angularjs-directive datetimepicker timepicker bootstrap-datetimepicker

【解决方案1】：

我使用 Angular js 为 timepicker 编写了一个指令

<!DOCTYPE html>
<html>

<head>
    <style>
    td.hours {
        width: 110px;
    }

    td.hours div {
        display: inline-block;
        padding: 5px;
    }
    </style>
</head>

<body>
    <h2>TimePicker Example</h2>
    <form ng-app="test" name="myForm" ng-controller="TestController" novalidate>
        <p>Time:
            <br>
            <timepicker></timepicker>
        </p>
        <br/>
        <button ng-click="submit()">Submit</button>
    </form>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-route.min.js"></script>
    <script>
    var module = angular.module('test', ['ngRoute']).controller("TestController", TestController);

    function TestController($scope) {
        $scope.submit = function() {
            alert($scope.timeValue);
        };
    }

    //Template for the time picker, no CSS, pure HTML. The time-picker tag will be replaced by this
    var timePickerTemplate = [
        '<div class="timePicker">',
        '<label ng-click="toggleTimePicker()">',
        '<input type="text" ng-model="timeLabel" ng-bind="timeValue" disabled>',
        '</label>',
        '<div class="cal-wraper shadow"  ng-show="selecting">',
        '<table>',
        '<tr class="navigation">',
        '<tr class="time">',
        '<td class="mer"><div ng-click="selectMeridian(meridian)" ng-repeat="meridian in meridians" ng-bind="meridian"></div></td>',
        '<td class="hours"><div ng-click="selectHour(hour)" ng-repeat="hour in hours" ng-bind="hour.label"></div></td>',
        '<td class="minutes"><div ng-click="selectMinute(minute)" ng-repeat="minute in minutes" ng-bind="minute"></div></td>',
        '</tr>',
        '</table>',
        '</div>',
        '</div>'
    ].join('\n');

    module.directive("timepicker", function() {
        return {
            restrict: 'E',
            templateUrl: "timePicker.tmpl",
            transclude: true,
            controller: function($scope) {

                var timeObj = {
                    AM: [],
                    PM: []
                };
                for (var i = 0; i <= 11; i++) {
                    timeObj.AM.push({
                        label: (i < 10 ? '0' + i : i),
                        value: i
                    });
                }
                timeObj.PM.push({
                    label: 12,
                    value: 12
                });
                for (var i = 1; i <= 11; i++) {
                    timeObj.PM.push({
                        label: (i < 10 ? '0' + i : i),
                        value: i + 12
                    });
                }

                $scope.meridians = ["AM", "PM"];
                $scope.hours = timeObj.AM;
                $scope.minutes = ["00", "15", "30", "45"];

                if ($scope.timeValue == undefined) {
                    $scope.timeValue = 9 * 60 * 60 * 1000;
                }

                $scope.toggleTimePicker = function() {
                    $scope.selecting = !$scope.selecting;
                };

                $scope.$watch('timeValue', function(val) {
                    $scope.updateLabel(val);
                });

                $scope.selectMeridian = function(meridian) {
                    $scope.hours = timeObj[meridian];
                    $scope.timeValue = (meridian == "AM" ? (9 * 60 * 60 * 1000) : (15 * 60 * 60 * 1000));
                };

                $scope.selectHour = function(hour) {
                    $scope.timeValue = (hour.value * 60 * 60 * 1000);
                };

                $scope.selectMinute = function(minute) {
                    var time = $scope.timeValue;
                    var mts = time % (60 * 60 * 1000);
                    $scope.timeValue = (time - mts + minute * 60 * 1000);
                };

                $scope.updateLabel = function(timeValue) {
                    var mts = timeValue % (60 * 60 * 1000);
                    var hrs = (timeValue - mts) / (60 * 60 * 1000);
                    var mts2 = mts / (60 * 1000);
                    var mer = (hrs < 11) ? "AM" : "PM";
                    var hrs2 = (hrs > 12) ? hrs - 12 : hrs;

                    $scope.timeLabel = (hrs2 < 10 ? '0' + hrs2 : hrs2) + ":" + (mts2 == 0 ? '00' : mts2) + " " + mer;
                };
            }
        }
    }).run([
        '$templateCache',
        function($templateCache) {
            $templateCache.put('timePicker.tmpl', timePickerTemplate); // This saves the html template we declared before in the $templateCache
        }
    ]);
    </script>
</body>

</html>

【讨论】：

哇。这就是我正在寻找的。非常感谢你

【解决方案2】：

您是否尝试过 Angular ui 库。 Angular bootstrap 有一个，但没有那么吸引人。 http://angular-ui.github.io/bootstrap/#/timepicker

我认为 Angularstarp 易于设置指令 http://mgcrea.github.io/angular-strap/##timepickers。

【讨论】：