Question

我们正在使用AngularUI timepicker（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

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

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

Answer 1

您需要同时使用timepicker和modal。

<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

希望这有帮助。

Answer 2

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

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

2 个答案: