没有显示使用Angular.ui Datepicker的日期

时间：2016-04-15 21:52:05

标签： javascript angularjs datepicker angular-ui-bootstrap angular-ui-datepicker

我正在尝试实现Datepicker弹出窗口。我正在使用获取启动页面上的示例Here。当我点击日历图标时，弹出窗口显示但没有日期，只是向左和向右箭头，我收到此错误。

我没有测试过所有其他指令，但我尝试过的所有指令（工具提示，轮播等）都有效。

以下是我在文档中使用的标记：

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

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

  $scope.inlineOptions = {
    customClass: getDayClass,
    minDate: new Date(),
    showWeeks: true
  };

  $scope.dateOptions = {
    dateDisabled: disabled,
    formatYear: 'yy',
    maxDate: new Date(2020, 5, 22),
    minDate: new Date(),
    startingDay: 1
  };

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

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

  $scope.toggleMin();

  $scope.open1 = function() {
    $scope.popup1.opened = true;
  };

  $scope.open2 = function() {
    $scope.popup2.opened = true;
  };

  $scope.setDate = function(year, month, day) {
    $scope.dt = new Date(year, month, day);
  };

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

  $scope.popup1 = {
    opened: false
  };

  $scope.popup2 = {
    opened: false
  };

  var tomorrow = new Date();
  tomorrow.setDate(tomorrow.getDate() + 1);
  var afterTomorrow = new Date();
  afterTomorrow.setDate(tomorrow.getDate() + 1);
  $scope.events = [
    {
      date: tomorrow,
      status: 'full'
    },
    {
      date: afterTomorrow,
      status: 'partially'
    }
  ];

  function getDayClass(data) {
    var date = data.date,
      mode = data.mode;
    if (mode === 'day') {
      var dayToCheck = new Date(date).setHours(0,0,0,0);

      for (var i = 0; i < $scope.events.length; i++) {
        var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);

        if (dayToCheck === currentDay) {
          return $scope.events[i].status;
        }
      }
    }

    return '';
  }

这是我在doc网站上使用的JS：

Empty string passed to getElementById(). /
Error: date1 is undefined
this.compare@http://localhost:3000/lib/angular-bootstrap/ui-bootstrap-tpls.js:2424:9
this.createDateObject@http://localhost:3000/lib/angular-bootstrap/ui-bootstrap-tpls.js:2171:28
this._refreshView@http://localhost:3000/lib/angular-bootstrap/ui-bootstrap-tpls.js:2414:34
this.refreshView@http://localhost:3000/lib/angular-bootstrap/ui-bootstrap-tpls.js:2138:7
this.init@http://localhost:3000/lib/angular-bootstrap/ui-bootstrap-tpls.js:2403:5
.link@http://localhost:3000/lib/angular-bootstrap/ui-bootstrap-tpls.js:2563:7
invokeLinkFn@http://localhost:3000/lib/angular/angular.js:9623:9
nodeLinkFn@http://localhost:3000/lib/angular/angular.js:9022:11
delayedNodeLinkFn@http://localhost:3000/lib/angular/angular.js:9380:11
compositeLinkFn@http://localhost:3000/lib/angular/angular.js:8333:13
publicLinkFn@http://localhost:3000/lib/angular/angular.js:8213:30
boundTranscludeFn@http://localhost:3000/lib/angular/angular.js:8350:16
controllersBoundTransclude@http://localhost:3000/lib/angular/angular.js:9072:20
ngSwitchWatchAction/<@http://localhost:3000/lib/angular/angular.js:29434:13
forEach@http://localhost:3000/lib/angular/angular.js:321:11
ngSwitchWatchAction@http://localhost:3000/lib/angular/angular.js:29433:11
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:3000/lib/angular/angular.js:16869:23
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:3000/lib/angular/angular.js:17133:13
ngEventHandler/<@http://localhost:3000/lib/angular/angular.js:24813:17
m.event.dispatch@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:4:8497
m.event.add/r.handle@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:4:5235
EventListener.handleEvent*m.event.add@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:4:5723
.on/<@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:4:15011
.each@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:2:2973
m.prototype.each@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:2:833
.on@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:4:14990
ngEventHandler@http://localhost:3000/lib/angular/angular.js:24806:13
invokeLinkFn@http://localhost:3000/lib/angular/angular.js:9623:9
nodeLinkFn@http://localhost:3000/lib/angular/angular.js:9022:11
compositeLinkFn@http://localhost:3000/lib/angular/angular.js:8333:13
nodeLinkFn@http://localhost:3000/lib/angular/angular.js:9017:24
compositeLinkFn@http://localhost:3000/lib/angular/angular.js:8333:13
compositeLinkFn@http://localhost:3000/lib/angular/angular.js:8336:13
compositeLinkFn@http://localhost:3000/lib/angular/angular.js:8336:13
nodeLinkFn@http://localhost:3000/lib/angular/angular.js:9017:24
delayedNodeLinkFn@http://localhost:3000/lib/angular/angular.js:9380:11
compositeLinkFn@http://localhost:3000/lib/angular/angular.js:8333:13
publicLinkFn@http://localhost:3000/lib/angular/angular.js:8213:30
boundTranscludeFn@http://localhost:3000/lib/angular/angular.js:8350:16
controllersBoundTransclude@http://localhost:3000/lib/angular/angular.js:9072:20
ngSwitchWatchAction/<@http://localhost:3000/lib/angular/angular.js:29434:13
forEach@http://localhost:3000/lib/angular/angular.js:321:11
ngSwitchWatchAction@http://localhost:3000/lib/angular/angular.js:29433:11
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:3000/lib/angular/angular.js:16869:23
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:3000/lib/angular/angular.js:17133:13
ngEventHandler/<@http://localhost:3000/lib/angular/angular.js:24813:17
m.event.dispatch@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:4:8497
m.event.add/r.handle@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:4:5235
EventListener.handleEvent*m.event.add@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:4:5723
.on/<@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:4:15011
.each@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:2:2973
m.prototype.each@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:2:833
.on@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:4:14990
ngEventHandler@http://localhost:3000/lib/angular/angular.js:24806:13
invokeLinkFn@http://localhost:3000/lib/angular/angular.js:9623:9
nodeLinkFn@http://localhost:3000/lib/angular/angular.js:9022:11
compositeLinkFn@http://localhost:3000/lib/angular/angular.js:8333:13
compositeLinkFn@http://localhost:3000/lib/angular/angular.js:8336:13
compositeLinkFn@http://localhost:3000/lib/angular/angular.js:8336:13
compositeLinkFn@http://localhost:3000/lib/angular/angular.js:8336:13
nodeLinkFn@http://localhost:3000/lib/angular/angular.js:9017:24
compositeLinkFn@http://localhost:3000/lib/angular/angular.js:8333:13
compositeLinkFn@http://localhost:3000/lib/angular/angular.js:8336:13
compositeLinkFn@http://localhost:3000/lib/angular/angular.js:8336:13
publicLinkFn@http://localhost:3000/lib/angular/angular.js:8213:30
$ViewDirectiveFill/<.compile/<@http://localhost:3000/lib/angular-ui-router/release/angular-ui-router.js:4089:9
invokeLinkFn@http://localhost:3000/lib/angular/angular.js:9623:9
nodeLinkFn@http://localhost:3000/lib/angular/angular.js:9022:11
compositeLinkFn@http://localhost:3000/lib/angular/angular.js:8333:13
publicLinkFn@http://localhost:3000/lib/angular/angular.js:8213:30
lazyCompilation@http://localhost:3000/lib/angular/angular.js:8551:16
updateView@http://localhost:3000/lib/angular-ui-router/release/angular-ui-router.js:4021:23
$ViewDirective/directive.compile/</<@http://localhost:3000/lib/angular-ui-router/release/angular-ui-router.js:3959:11
$RootScopeProvider/this.$get</Scope.prototype.$broadcast@http://localhost:3000/lib/angular/angular.js:17348:15
transitionTo/$state.transition<@http://localhost:3000/lib/angular-ui-router/release/angular-ui-router.js:3352:11
processQueue@http://localhost:3000/lib/angular/angular.js:15757:28
scheduleProcessQueue/<@http://localhost:3000/lib/angular/angular.js:15773:27
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://localhost:3000/lib/angular/angular.js:17025:16
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:3000/lib/angular/angular.js:16841:15
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:3000/lib/angular/angular.js:17133:13
done@http://localhost:3000/lib/angular/angular.js:11454:36
completeRequest@http://localhost:3000/lib/angular/angular.js:11652:7
requestLoaded@http://localhost:3000/lib/angular/angular.js:11593:9
EventHandlerNonNull*createHttpBackend/<@http://localhost:3000/lib/angular/angular.js:11576:7
sendReq@http://localhost:3000/lib/angular/angular.js:11423:9
$http/serverRequest@http://localhost:3000/lib/angular/angular.js:11133:16
processQueue@http://localhost:3000/lib/angular/angular.js:15757:28
scheduleProcessQueue/<@http://localhost:3000/lib/angular/angular.js:15773:27
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://localhost:3000/lib/angular/angular.js:17025:16
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:3000/lib/angular/angular.js:16841:15
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:3000/lib/angular/angular.js:17133:13
bootstrapApply@http://localhost:3000/lib/angular/angular.js:1713:9
invoke@http://localhost:3000/lib/angular/angular.js:4625:16
bootstrap/doBootstrap@http://localhost:3000/lib/angular/angular.js:1711:5
bootstrap@http://localhost:3000/lib/angular/angular.js:1731:12
init@http://localhost:3000/modules/core/client/app/init.js:43:5
m.Callbacks/j@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:2:27304
m.Callbacks/k.fireWith@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:2:28122
.ready@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:2:29954
J@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:2:30320
EventListener.handleEvent*m.ready.promise@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:2:30456
m.fn.ready@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:2:29706
m.fn.init@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:2:24733
m@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:2:393
@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:2:30891
@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:2:207
@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:2:2
 <table data-ng-animate="1" ng-switch-when="month" tabindex="0" class="uib-monthpicker" role="grid" aria-labelledby="{{::uniqueId}}-title" aria-activedescendant="{{activeDateId}}">

以下是控制台错误：

{{1}}

2 个答案:

答案 0 :(得分：1)

我从您的控制台错误中看到您还引用了jQuery。确保在引用Angular之前引用了的jQuery，这样你就可以获得jQuery而不是jqLit​​e的全部好处。

我使用您提供的代码制作了一个模拟模块，控制器和视图，它对我来说非常适合。我使用了jQuery，Angular和Angular UI的常用引用顺序。但是，当我改变命令将jQuery放在Angular之后时，datepicker只有几个按钮而且没有像你描述的那样的日期。

答案 1 :(得分：0)

我尝试了这个例子，但它确实有效。在我查看了您的代码和日志之后，下面会提供一些提示/检查点：

1）UI引导程序还取决于角度动画（应该在 ui-bootstrap-tpls.js 之前）

2）还应添加模块依赖性，如下例所示：

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerPopupDemoCtrl', function ($scope) { ............

最后，如果上面的检查点无法解决您的问题，您可能需要点击“在plunker中编辑”来获取示例的完整源代码（html和javascript文件）示例代码的右侧。然后，您就可以比较可行的示例代码和代码之间的确切差异。

相关问题
最新问题