AngularUI Timepicker - 在弹出窗口中选择时间答案

【问题标题】：AngularUI Timepicker - Select time in popupAngularUI Timepicker - 在弹出窗口中选择时间
【发布时间】：2016-07-01 11:07:41
【问题描述】：

我们正在使用 AngularUI 时间选择器 (https://angular-ui.github.io/bootstrap/) 来选择时间集成后，我无法选择时间和设置格式，但我需要像 datepicker 一样在弹出窗口中显示相同的内容。用户将单击时间图标，然后将出现一个弹出窗口以选择时间。厌倦了使用下面的代码，但没有工作。

<input type="text" class="form-control" uib-timepicker-popup ng-model="mytime" is-open="popup1.opened" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian" ng-required="true" close-text="Close" />

我也做了同样的事情 - http://plnkr.co/edit/yv3xT8KbP6pD7tV46Clf?p=preview

如何在弹出窗口中显示时间选择？

Ref - http://plnkr.co/edit/S8UqwvXNGmDcPXV7a0N3?p=preview（请参阅选择时间选项）

【问题讨论】：

标签： angularjs popup angular-ui-bootstrap angular-ui timepicker

【解决方案1】：

您需要同时使用时间选择器和模式。

<p class="input-group">
  <input type="text" class="form-control" ng-model="mytime"  />
  <span class="input-group-btn">
    <button type="button" class="btn btn-default" ng-click="open()"><i class="fa fa-clock-o"></i></button>
  </span>
</p>

在控制器中：

 $scope.open = function (size) {

var modalInstance = $uibModal.open({
  animation: $scope.animationsEnabled,
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  size: size,
  resolve: {
    time: function () {
      return $scope.mytime;
    }
  }
});

modalInstance.result.then(function (selectedItem) {
  $scope.mytime = selectedItem;
}, function () {
  $log.info('Modal dismissed at: ' + new Date());
});

};

这是plunker 的示例

希望这会有所帮助。

【讨论】：

我已经包含了 ui-bootstrap 文件并且仅用于 timepicker，不建议包含另一个 datetimepicker.js 文件。您可以将其更改为与 angular-ui 一起使用吗？
ui-bootstrap 不提供我能找到的时间选择器弹出窗口。请指教。
这就是定制所在。我们能不能在弹出窗口中显示时间选择器？
我更新了示例以展示如何同时使用 uib-modal 和 uib-timepicker 来获得所需的结果。这将比他们为其创建指令的日期选择器弹出窗口更复杂。

【解决方案2】：

有一个popover 指令，您可以在其中定义内容模板。

【讨论】：