Question

我无法获得@ ng-bootstrap / ng-bootstrap datepicker来实际显示日历。我首先尝试在我自己的项目中，使用多个日历的文档中的plunkr示例。我得到的只是一个小矩形，大约4像素高，30像素宽，内部没有任何东西。

然后我搜索了SO并找到this example and plunkr并尝试了它，结果相同。

我使用Angular 2 CLI生成了一个全新的Angular应用程序，安装了@ ng-bootstrap / ng-bootstrap，并添加了最后一个plunkr的代码。这会产生更糟糕的结果，甚至不显示选择器按钮。

有没有人对此有所了解？

更新：我意识到我没有引用font-awesome，所以之后我的控件看起来像这样，日历会弹出，但这不是很好看！

更新2：仍在努力解决这个问题。我尝试了一个具有类似结果的不同库 - 下拉列表不起作用。我相信这是一个问题，下拉列表只是在嵌套组件中不起作用。我已经将工作版本的所有库与非工作版进行了比较，它们都是相同的。唯一的区别是工作的组件位于顶级组件中，而非工作组件位于嵌套组件中。

更新3：已解决。

涉及2件事。 1 - 我必须将表单组和输入组类合并为一个div

2 - 控制台中有一个未定义变量的TypeScript错误。我不知道为什么这会阻止控件从日历中删除，因为该变量与表单无关，但确实如此。一旦我修复了它，日历就会正确呈现。

这是我的示例代码：

＆＃13;

import { Component, OnInit } from '@angular/core';
import {FormControl, FormGroup} from "@angular/forms";

@Component({
  selector: 'app-sub',
  templateUrl: './sub.component.html',
  styleUrls: ['./sub.component.css']
})
export class SubComponent implements OnInit {
  thisForm: FormGroup;

  constructor() { }

  ngOnInit() {
    this.thisForm = new FormGroup({
      dp1: new FormControl('')
    });
  }

  onSubmit(){}
}

＆＃13;

<form [formGroup]="thisForm" (ngSubmit)="onSubmit()">

  <div class="form-group input-group">
    <input class="form-control" placeholder="yyyy-mm-dd" id="dp1" form-control-name="dp1" name="dp1"   ngbDatepicker #d1="ngbDatepicker" required>
    <div class="input-group-addon" (click)="d1.toggle()" >
      <i class="fa fa-calendar" aria-hidden="true"></i>
    </div>
  </div>

  <button class="btn btn-primary" type="submit" [disabled]="!thisForm.valid">Submit</button>
</form>

＆＃13;

Answer 1

我遇到了类似的问题，我的ng-bootstrap日历弹出窗口无效。 John_J的评论中也提到了解决我问题的方法。

实际上，ng-bootstrap存储库包含一组基于Bootstrap标记和CSS的本机Angular指令。因此，不需要依赖jQuery或Bootstrap的JavaScript。唯一需要的依赖项是：

Angular（需要Angular版本4或更高版本，使用4.0.3测试） Bootstrap CSS（使用4.0.0-beta测试）

解决方案很简单。

在index.html中： -

将<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">添加到<head>。
然后加入 - <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

在结束标记的正上方。在那里你去...日历开始工作完全正常。这是一个link到网站，你可以从中获得更多细节。

Angular 2 datepicker的ng-bootstrap不会弹出日历

1 个答案: