ng2-eonasdan-datetimepicker css 未正确应用

Question

在我的项目中加入了 ng2-eonasdan-datetimepicker，但我认为 CSS 应用不正确，我不知道为什么。这就是它现在的样子，而不是它应该看起来的样子......

在我使用的组件中：

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

我已经从 cdn 复制了这些文件。

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

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

}

没有收到任何错误。

更新：

我只想在这个组件中保留 stypes。尝试这样做，但它泄漏并破坏了包含它的任何组件的页面。

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">