Пользовательского Time Picker с помощью Угловых JS

мне нужны пользовательские сборщика времени, используя угловую JavaScriptПользовательского Time Picker с помощью Угловых JS

Я пробовал время в обычном выпадающем меню, что не очень хорошо , потому что пользователь должен выбрать 3 выпадающие 1) Часы 2) Протокол 3) Meridian

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

Вместо трех полей я планирую добавить один выбор времени

источник

2014-09-22 veeru

Я написал одну директивы timepicker с помощью углового JS

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

источник

2014-09-22 10:29:27 veeru

Ничего себе. это то, что я ищу. Большое спасибо –

Вы пробовали Угловые библиотеки ui. Угловая бутстрап имеет один, но не такой привлекательный. http://angular-ui.github.io/bootstrap/#/timepicker

Я думаю Angularstarp проста в настройке директив http://mgcrea.github.io/angular-strap/##timepickers.

источник

2014-09-22 10:34:24

Пользовательского Time Picker с помощью Угловых JS

ответ

Смежные вопросы