JS库的角度包装器不加载样式

Question

我想在我的应用程序中使用此库https://bootstrap-datepicker.readthedocs.io/en/latest/markup.html#date-range。但这必须是有角度的组件，因此在我短暂的职业生涯中，我第一次想要创建库的包装器，但是我认为我做错了什么，因为它看起来不像原始的选择器。

它应该是这样的：

这就是我的角度分量的样子：

此外，当我只想选择月份或年份时，它看起来很奇怪：

好了，现在该看我的组件代码了：

import {AfterViewInit, Component, ElementRef, Input, OnInit} from 
'@angular/core';
import 'bootstrap-datepicker';
declare var $;


@Component({
selector: 'cb-daterangepicker',
templateUrl: './daterangepicker.component.html',
styleUrls: ['./daterangepicker.component.scss']
})
export class DaterangepickerComponent implements OnInit, AfterViewInit {

@Input()
datepickerOptions: DatepickerOptions;

constructor(private elementRef: ElementRef) {
}

ngOnInit() {

}

ngAfterViewInit(): void {
    // $(this.elementRef.nativeElement).datepicker();

    $('.input-daterange input').each(function() {
        $(this).datepicker('clearDates');
    });
}

}

如您所见，没有选择范围，或者只是开始和结束日期，它看起来只是不同，所以我认为这是因为未加载样式，但我可能是错的。我需要您的帮助，伙计们，也许我的包装没有正确完成？

*具有样式的网络控制台：

index.html和angular.json的插件样式在某些方面有所帮助：

但日期之间的范围仍未突出显示。.

Answer 1

您确定引导程序已正确加载吗？您必须先进行检查，然后再检查是否已加载库的CSS。 尝试使用浏览器网络控制台进行检查：) 否则，请尝试使用CDN调用库样式：

https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css