AngularJS angular-ui bootstrap timepicker as dropdown

Question

Мне нравится показывать timepicker как выпадающий список (popup) во входном элементе, таком как datepicker. Есть ли какой-либо простой способ выполнить это или требуется полная новая директива?

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(); 
      }); 
     } 
    }; 
}); 

Fiddle Demo