javascript - JS 库的 Angular 包装器不加载样式

问题描述

我想在我的应用程序中使用这个库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 有助于解决一些问题：

但是仍然没有突出显示日期之间的范围..

标签： javascriptcssangularcomponentswrapper

javascript - JS 库的 Angular 包装器不加载样式

问题描述

解决方案

推荐阅读