2016-12-31 14 views
0

@ ng-bootstrap/ng-bootstrap datepickerを実際にカレンダーを表示することができません。私は最初に、複数のカレンダーのドキュメントのplunkrの例を使って自分のプロジェクト内で試してみました。私が得たのは、内部に何もない、約4ピクセルの高さと30ピクセルの幅の小さな四角形でした。Angular 2 datepickerのng-bootstrapがカレンダーをポップアップしない

enter image description here

Iは、次いで、SO検索しthis example and plunkrを発見し、同じ結果と、それを試してみました。

Angular 2 CLIでまったく新しいAngularアプリケーションを生成し、@ ng-bootstrap/ng-bootstrapをインストールし、最後のplunkrのコードを追加しました。これにより、結果がさらに悪化し、セレクタボタンが表示されなくなります。

enter image description here

誰もがこれへの洞察を持っていますか?

update:私はフォントの素晴らしい参照をしていないことに気付きました。その後、私のコントロールはこのように見え、カレンダーはポップダウンしますが、これは良いことではありません!

enter image description here

アップデート2:まだこの問題を解決しようとしています。私は同様の結果を持つ別のライブラリを試しました - ドロップダウンは機能しません。私はこれが入れ子になったコンポーネントで動作していないドロップダウンの問題だと思っています。私は、動作しているバージョンのすべてのライブラリを非動作と比較しており、すべて同じです。唯一の違いは、作業用のコンポーネントが最上位のコンポーネントにあり、非動作用のコンポーネントがネストされたコンポーネントにあることです。

更新3:解決済み。

2件が関係していました。 1 - フォームグループと入力グループクラスを1つのdivに結合する必要がありました。

2 - 未定義の変数に対してコンソールにTypeScriptエラーがありました。私はなぜカレンダーがカレンダーを落とすのを防ぐのかわからない。なぜならその変数はフォームとは何の関係もないからだ。一度修正すれば、カレンダーは正しくレンダリングされます。

ここで働く私のサンプルコードです:

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リポジトリには、ブートストラップのマークアップと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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" 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>

    。 そしてそこに行く...カレンダーは完全に細かい作業を開始します。詳細はこちらからlinkのサイトにアクセスできます。

関連する問題