잉 - 부트 스트랩 날짜 선택기가

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> 

그런 다음 응용 프로그램/자바 스크립트/customers.js 내가 내가 내가 날짜 선택기를 표시 할 페이지에 태그

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

을 추가, 마지막으로

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 ] 
}) 

을 추가

캘린더가 나타 났지만 제대로 작동하지만 문제는 그것이 전체 페이지에 배치되었다는 것입니다. Days는 페이지의 맨 아래에 하나의 열로 배치됩니다. 즉, CSS 스타일이 캘린더에 적용되지 않았습니다.

내가 뭘 잘못하고있어? 아무도 나를 도울 수 있습니까?

Answer 1

다운로드 미리 감사와 원사했던 도움을 통해 3에서 부트 스트랩의 http://getbootstrap.com/