ng2-eonasdan-datetimepicker css未正确应用

Question

将ng2-eonasdan-datetimepicker加入到我的项目中，但我认为CSS没有正确应用，我不知道为什么。这就是它现在的样子，与它应该是什么样的......

在我的组件中，我使用：

styleUrls: ['../../../css/bootstrap.min.css',
            '../../../css/bootstrap-datetimepicker.min.css']

我在cdn中就地复制了这些文件。

似乎＆＃34; bootstrap.min.css＆＃34;正在工作，因为当我删除它时，日历根本不会打开，但是如果我删除＆＃34; bootstrap-datetimepicker.min.css＆＃34;它看起来完全一样，所以我认为问题就在那里。

HTML：

                <div class="form-group">
                <div class="input-group">
                    <input class="form-control" 
                    a2e-datetimepicker
                    [date]="date"
                    [options]="a2eOptions"
                    (onChange)="dateChange($event)"
                    (onClick)="dateClick()"
                    />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                </div>
            </div>

类别：

export class DateTimePicker implements OnInit {

  date: moment.Moment;
  a2eOptions: any;

  dateChange(date) {
    this.date = date;
  }

  dateClick() {
    console.log('click click!')
  }

  getTime() {
    alert('Selected time is:' + this.date);
  };

  addTime(val, selector) {
    this.date = moment(this.date.add(val, selector));
  };

  clearTime() {
    this.date = null;
  };

  constructor(){
      this.date = moment();
      this.a2eOptions = {format: 'YYYY/MM/DD HH:mm'};
  }

  ngOnInit(): void {
    console.log(datetimepicker);
  }

}

没有任何错误。

更新：

我想仅保留此组件中的stype。尝试这样做，但它泄漏并破坏包含它的任何组件的页面。

styles: ['
    @import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";
    @import "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.min.css";
']

Answer 1

您需要删除日期选择器的styleUrl，然后将cdn添加到index.html文件中。这是cdn

href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepick‌​er/4.17.43/build/css‌​/bootstrap-datetimep‌​icker.min.css">