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

Question

我正在尝试实现 Datepicker 弹出窗口。我正在使用入门页面上的示例，如Here所示。当我单击日历图标时，弹出窗口显示但没有日期，只有左右箭头，我收到此错误。

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

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

 <p class="input-group">
          <input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
        </p>

这是我从文档站点使用的 JS：

$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 '';
  }

这是控制台错误：

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}}">

score 1 · Accepted Answer

我从您的控制台错误中看到您还引用了 jQuery。确保在引用 Angular之前引用了 jQuery，这样您就可以充分利用 jQuery 而不是 jqLite。

我使用您提供的代码制作了一个模拟模块、控制器和视图，它对我来说非常有效。我使用了我通常的 jQuery、Angular 和 Angular UI 参考顺序。但是，当我更改将 jQuery 放在 Angular 之后的顺序时，日期选择器只有几个按钮，并且没有您所描述的日期。

score 0 · Accepted Answer

我尝试了这个例子并且它有效。在我浏览了您的代码和日志之后，以下是一些提示/检查点：

1) UI bootstrap 也依赖于 angular-animate (应该在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 文件）。然后，您可以比较可行的示例代码和您的代码之间的确切区别。

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

2 回答 2

Related

Reference