AngularJS angular-ui引導時間選擇器作為下拉列表

Question

我喜歡將時間選擇器顯示為日期選擇器等輸入元素中的下拉菜單（彈出窗口）。 有什么簡單的方法可以做到這一點，還是需要一個全新的指令？

Answer 1

的HTML

<div class="container container-fluid" ng-controller="MainCtrl">
       var1={{var1}}
      <form class="form-horizontal" novalidate name="form" ng-submit="submit()">
      <div class="well">
        <div id="date" class="input-append" datetimez ng-model="var1">
          <input data-format="hh:mm:ss"  type="text" id="input1" name="input1"></input>
          <span class="add-on">
            <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
          </span>
        </div>
      </div>
  </form>

  </div>

JS

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.var1 = '12-07-2013';
});


app.directive('datetimez', function() {
    return {
        restrict: 'A',
        require : 'ngModel',
        link: function(scope, element, attrs, ngModelCtrl) {
          element.datetimepicker({           
           language: 'en',
           pickDate: false,          
          }).on('changeDate', function(e) {
            ngModelCtrl.$setViewValue(e.date);
            scope.$apply();
          });
        }
    };
});

小提琴演示