Question

我尝试使用angular-ui-bootstrap插件配置一个日期选择器。

我已经下载并安装好了一切，但现在我的视图中没有显示日期选择器。我没有收到任何错误 - 它只是在视图中没有呈现出来。我是棱角分明的新人，所以有点失落。

这是我的代码：

app.js - 我在这里注入了datepicker。

angular.module('MyApp', ['ngResource', 'mgcrea.ngStrap', 'stripe', 'ui.router','ui.bootstrap',  'ui.bootstrap.datepicker', 'ngAnimate'])
.config(['$locationProvider', '$stateProvider', '$urlRouterProvider',  function($locationProvider, $stateProvider, stripeProvider, $urlRouterProvider){

$locationProvider.html5Mode(true);

    $stateProvider
        // route to show our basic form (/form)
        .state('form', {
            url: '/',
            templateUrl: 'views/home.html',
            controller: 'formController'
        })

blah blah

然后是控制器：

angular.module('MyApp')
.controller('formController', ['$scope', 'Appointment',   function($scope, Appointment) {


//for the date picker directives

$scope.dateTimeNow = function() {
    $scope.date = new Date();
  };
  $scope.dateTimeNow();

  $scope.toggleMinDate = function() {
    $scope.minDate = $scope.minDate ? null : new Date();
  };

  $scope.maxDate = new Date('2014-06-22');
  $scope.toggleMinDate();

  $scope.dateOptions = {
    startingDay: 1,
    showWeeks: false
  };

  // Disable weekend selection
  $scope.disabled = function(calendarDate, mode) {
    return mode === 'day' && ( calendarDate.getDay() === 0 || calendarDate.getDay() === 6 );
  };

  $scope.hourStep = 1;
  $scope.minuteStep = 15;

  $scope.timeOptions = {
    hourStep: [1, 2, 3],
    minuteStep: [1, 5, 10, 15, 25, 30]
  };

  $scope.showMeridian = true;
  $scope.timeToggleMode = function() {
    $scope.showMeridian = !$scope.showMeridian;
  };

  $scope.resetHours = function() {
    $scope.date.setHours(1);
  };

}]);

的index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.js"></script>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.2.1/angular-strap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.2.1/angular-strap.tpl.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-messages.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-resource.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-cookies.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-animate.min.js"></script>


<!-- for datetimepicker-->
<script type="text/javascript" src="components/angular-ui-datetimepicker/datetimepicker.js"></script>
<!-- ENDS for datetimepicker-->


<!-- Stripe includes-->

 <script type="text/javascript" src="components/stripe-angular/stripe-angular.js"></script>

<!-- Ends Stripe includes -->

datepicker的html：

<datetimepicker min-date="minDate" show-weeks="showWeeks" hour-step="hourStep" minute-step="minuteStep" ng-model="formData.date" show-meridian="showMeridian" date-format="dd-MMM-yyyy" date-options="dateOptions"  readonly-time="false"></datetimepicker>

我还包括 1）样式表 2）datepicker.js 3）所有引导程序等。

index.html中的

我能错过什么？

Answer 1

您不仅需要添加＆＃39; ui.bootstrap.datepicker＆＃39;还有＆＃39; ui.bootstrap.datetimepicker＆＃39;关于你的模块依赖。

你的app.js应该是这样的。

angular.module('MyApp', [...'ui.bootstrap.datepicker', 'ui.bootstrap.datetimepicker'])

将angular ui bootstrap注入app.js，但是datepicker没有显示在视图中

1 个答案: