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

标签 javascript angularjs datepicker angular-ui-bootstrap angular-ui-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}}">

最佳答案

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

我使用您提供的代码制作了一个模拟模块、 Controller 和 View ，它非常适合我。我使用了通常的引用顺序:jQuery、Angular，然后是 Angular UI。但是，当我更改顺序以将 jQuery 放在 Angular 之后时，日期选择器只有几个按钮，并且没有像您所描述的那样的日期。

关于javascript - 使用 Angular.ui Datepicker 没有显示日期，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36657430/

上一篇：javascript - 在 EaselJS 中，如果鼠标按下，如何获得 bool 值？

下一篇：javascript - IPV4 地址的正则表达式给出无效响应

相关文章：

css - Angular 阅读更多按钮基于行数而不是字母数

javascript - 绑定(bind)到类时，JQuery UI 日期选择器不起作用

javascript - 数学.floor() | 0

javascript - 仅用 2 个 div 查看 6 个 div 的内容

javascript - 永远不要同时显示两个 div

angularjs - 如何从angularjs表单中获取日期值

javascript - jquery，在 html() 调用后继续阅读

javascript - 结束时间应大于开始时间

android - DatePicker Android - 如何更改日期的颜色

php - 将自定义日期格式字符串转换为 yyyy/mm/dd

©2024 IT工具网  联系我们