NG-ブートストラップ日付ピッカーが

Question

私はアンギュラ4.4.6で働いているスタイルと私はまずng-bootstrap.github.io/#/components/datepicker/examples

から日付ピッカーを使用するつもりです5.1.4

レールされていない、私は、フォルダを作成し、そのapp/javascript/DatePickerファイル app/javascript/DatePicker/datepicker-basic.htmlとapp/javascript/DatePicker/index.ts.

これらのファイルにリソースからのコードを挿入して、テンプレートへのパスを変更します。

// app/javascript/DatePicker/index.ts 

import {Component} from '@angular/core'; 
import {NgbDateStruct} from '@ng-bootstrap/ng-bootstrap'; 

import template from './datepicker-basic.html' 

const now = new Date(); 

@Component({ 
    selector: 'ngbd-datepicker-basic', 
    template: template 
}) 
export class NgbdDatepickerBasic { 

model: NgbDateStruct; 
date: {year: number, month: number}; 

selectToday() { 
    this.model = {year: now.getFullYear(), month: now.getMonth() + 1, 
day: now.getDate()}; 
    } 
} 

// app/javascript/DatePicker/datepicker-basic.html 

<p>Simple datepicker</p> 

<ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"> 
</ngb-datepicker> 
<hr/> 
<button class="btn btn-sm btn-outline-primary" 
     (click)="selectToday()"> 
    Select Today 
</button> 
<button class="btn btn-sm btn-outline-primary" 
     (click)="dp.navigateTo()"> 
    To current month 
</button> 
<button class="btn btn-sm btn-outline-primary" 
       (click)="dp.navigateTo({year: 2013, month: 2})"> 
    To Feb 2013 
</button> 
<hr/> 
<pre>Month: {{ date.month }}.{{ date.year }}</pre> 
<pre>Model: {{ model | json }}</pre> 

は、次にアプリ/ JavaScriptで/私は

import { NgbdDatepickerBasic } from "../DatePicker/index"; 
import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; 

......... 


var CustomerAppModule = NgModule({ 
imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 

    NgbModule.forRoot(), 

    routing 
], 
declarations: [ 
    CustomerSearchComponent, 
    CustomerDetailsComponent, 
    CustomerInfoComponent, 
    TextFieldComponent, 
    FilterByPipe, 

    NgbdDatepickerBasic, 

    AppComponent 
], 
bootstrap: [ AppComponent ] 
}) 

を追加customers.jsは最後に、私は日付ピッカー

を見たいページにタグ

<ngbd-modal-basic></ngbd-modal-basic> 

を追加しました

カレンダーが出てきましたが、問題はそれがページ全体に配置されていることです。日はページの一番下に1列表示されます。つまり、CSSスタイルはカレンダーに適用されませんでした。

私は間違っていますか？誰か助けてくれますか？ 事前のおかげで

Answer 1

ダウンロードして糸を経由して、ブートストラップのhttp://getbootstrap.com/