【发布时间】：2019-05-29 20:16:32
【问题描述】：
我想在我的应用程序中使用这个库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 有助于解决一些问题：
但日期之间的范围仍然没有突出显示..
【问题讨论】：
-
您是否按照dependencies 部分中的步骤进行操作？它说您需要生成一个独立的 .css 文件。
-
这意味着我有例如复制/粘贴样式到我的 daterangepicker.component.scss？
标签： javascript css angular components wrapper