Question

问题：

我无法找到一个解决方案，如何在Angular的模态中使Datepicker工作。（请参阅下面的代码示例）

示例代码：

field1

var app = angular.module('demo', ['ui.bootstrap', 'ngAnimate']);

app.controller('MainCtrl', ['$scope', '$uibModal', function($scope, $uibModal){

  $scope.open = function () {

    var modalInstance = $uibModal.open({
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl'
    });
  
  };
  
}]);

app.controller('ModalInstanceCtrl', ['$scope', '$uibModalInstance', function ($scope, $uibModalInstance) {
  
  $scope.open = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened = true;
  };

  $scope.cancel = function () {
    $uibModalInstance.dismiss('cancel');
  };
}]);

我还为代码示例创建了plunker。

Answer 1

您没有在输入字段上调用/实现日期选择器指令。更确切地说，在其中一个版本更改期间，指令符号更改（到uib-）角度ui-bootstrap。

因此，您的版本的正确语法是：

<input type="text" class="form-control" uib-datepicker-popup ng-model="dt" />
  <span class="input-group-btn">
     <button type="button" class="btn btn-default" ng-click="open2()">
       <i class="glyphicon glyphicon-calendar"></i>
     </button>
  </span>

如上所述添加uib-datepicker-popup属性的关键。

正在运行示例：

＆＃13;

var app = angular.module('demo', ['ui.bootstrap', 'ngAnimate']);

app.controller('MainCtrl', ['$scope', '$uibModal',
  function($scope, $uibModal) {

    $scope.open = function() {
      $uibModal.open({
        templateUrl: 'myModalContent.html',
        controller: 'ModalInstanceCtrl'
      });
    };

  }
]);

app.controller('ModalInstanceCtrl', ['$scope', '$uibModalInstance',
  function($scope, $uibModalInstance) {

    $scope.open = function($event) {
      $event.preventDefault();
      $event.stopPropagation();

      $scope.opened = true;
    };

    $scope.cancel = function() {
      $uibModalInstance.dismiss('cancel');
    };
  }
]);

＆＃13;

<!doctype html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
  <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.1.js"></script>


  <script src="example.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

</head>

<body>

  <div ng-app="demo">
    <div ng-controller="MainCtrl" class="container">
      <button class="btn btn-default" ng-click="open()">Open Modal</button>
    </div>


    <script type="text/ng-template" id="myModalContent.html">
      <div class="modal-header">
        <h3 class="modal-title">Modal with a DatePicker</h3>
      </div>
      <div class="modal-body">
        <div class="col-md-6">
          <p class="input-group">
            <input type="text" class="form-control" datepicker-popup="shortDate" ng-model="dt" is-open="opened" uib-datepicker-popup />
            <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
              </span>
          </p>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" ng-click="cancel()">Cancel</button>
      </div>
    </script>


  </div>
</body>

</html>

＆＃13;

AngularJS：在模态上使用时，Datepicker不显示

1 个答案: