2016-12-31 124 views
0

我無法獲取@ ng-bootstrap/ng-bootstrap datepicker來實際顯示日曆。我第一次嘗試在我自己的項目中使用文檔中的多個日曆中的plunkr示例。我得到的只是一個小矩形,高約4像素,寬30像素,裏面什麼也沒有。Angular 2 datepicker的ng-bootstrap不會彈出日曆

enter image description here

我再搜查SO,發現this example and plunkr和試了一下,結果相同。

我使用Angular 2 CLI生成了一個全新的Angular應用程序,安裝了@ ng-bootstrap/ng-bootstrap,並添加了最後一個plunkr的代碼。這會導致更糟的結果,甚至不會顯示選擇器按鈕。

enter image description here

是否有人洞察到這一點?

更新:我意識到我沒有字體真棒引用,所以之後,我的控件看起來像這樣,日曆彈出下來,但這不是一個好看!

enter image description here

更新2:仍在試圖解決這個問題。我嘗試了一個類似結果的不同庫 - 下拉式不起作用。我相信這是一個問題,下拉只是不適用於嵌套組件。我將工作版本的所有庫與非工作庫進行了比較,它們都是一樣的。唯一的區別是工作的是在頂層組件中,非工作的是在嵌套組件中。

更新3:已解決。

有2件事涉及到。 1 - 我不得不形式組和輸入組的類組合成一個的div

2 - 有一個在控制檯未定義的變量一個打字稿錯誤。我不知道爲什麼這會阻止控制權下降日曆,因爲該變量與表單無關,但它確實如此。一旦我解決了這個問題,日曆就能正確呈現。

這裏是我的示例代碼工作的:

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(){} 
 
}

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

+1

請添加您試過的問題的[mcve]。我們還應該怎麼知道你的代碼丟失了? – ochi

+0

好主意,但是使用Plunkr的人不知道底層的基礎設施是什麼,有什麼樣的圖書館等等,我覺得它不會有幫助,因爲我用一個現有的完整和可驗證的例子開始,它沒有工作。 – glitchbane

+0

隨意添加解決方案作爲答案(而不是問題的一部分)並將其標記爲這樣。 – ochi

回答

0

我正經歷着類似的問題在我的NG-引導日曆彈出沒有工作。 John_J在評論中也提到了什麼解決了我的問題。

實際上,ng-bootstrap存儲庫包含一組基於Bootstrap標記和CSS的原生Angular指令。因此不需要依賴jQuery或Bootstrap的JavaScript。唯一需要的依賴關係是:

角度(需要角度版本4或更高版本,使用4.0.3進行測試) 引導CSS(使用4.0測試)。0-beta)

解決方案很簡單。

在您的index.html: -

  1. 添加 - <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">到您的<head>

  2. 然後添加 - <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到網站,你可以從中獲得更多的細節。