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>

Class:

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

ng2-eonasdan-datetimepicker css 未正确应用

ng2-eonasdan-datetimepicker css not being applied properly

eonasdan-datetimepicker

angular