ui.datepicker弹出窗口没有打开 - Angularjs

时间:2016-02-22 05:53:59

标签: jquery angularjs jquery-ui datepicker angular-ui

我使用的是角度ui.datepicker指令,但是他们网站上给出的代码对我不起作用,我无法理解其中的原因。单击日历按钮时,日期选择器弹出窗口未打开。我已经浏览了很多stackoverflow链接,但它似乎并不适合我。

这是我的代码 -

HTML -

<html ng-app="demo">
  <head>
     <link href="/css/bootstrap.min.css" rel="stylesheet" />
     <script type="text/javascript" src="/js/jquery.min.js"></script>
     <script type="text/javascript" src="/js/bootstrap.js"></script>
     <script type="text/javascript" src="/js/angular.min.js"></script>
     <script type="text/javascript" src="/js/textAngular.min.js"></script> 
     <script src="/js/ui-bootstrap-tpls-1.1.2.min"></script> 
     <script src="/js/app.js"></script> 
  </head>
  <body>
  <div ng-controller="demoCtrl">
    <div style="display:inline-block; min-height:290px;">
      <datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="well well-sm"></datepicker>  
    </div>

    <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
         <span class="input-group-btn">
           <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
         </span>
    </div>
  </body>
  </html>

app.js -

var app = angular.module('demo',['textAngular','ui.bootstrap']);
app.controller('demoCtrl',[ '$location','$scope','$http', '$window', function($location, $scope, $http, $window){

    $scope.today = function() {
    $scope.dt = new Date();
  };
  $scope.today();

  $scope.clear = function () {
    $scope.dt = null;
  };

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

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

  $scope.open = function($event) {
    $event.preventDefault();
    $event.stopPropagation();            

    $scope.opened = true;
  };

  $scope.dateOptions = {
    formatYear: 'yy',
    startingDay: 1
  };

  $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
  $scope.format = $scope.formats[0];

}]);

任何人都可以帮我解决这个问题吗?提前致谢

0 个答案:

没有答案