Question

我正在使用Angular 4.4.6和rails 5.1.4

我将使用ng-bootstrap.github.io/#/components/datepicker/examples

中的datepicker

首先，我创建了文件夹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>

然后在app / javascript / customers.js中我添加了

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

最后，我添加了标签

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

到我想看日期选择器的页面

日历已经出现并且有效，但问题是它被放入整个页面。天数位于页面底部的一列。也就是说，CSS样式未应用于日历。

我做错了什么？有谁能够帮我？提前致谢

Answer 1

从http://getbootstrap.com/

下载并将bootstrap.css包含到您的项目中

Ng-bootstrap datepicker没有样式

1 个答案: