Угловая оболочка библиотеки JS не загружает стили - PullRequest
0 голосов
/ 03 января 2019

Я хочу использовать эту библиотеку https://bootstrap -datepicker.readthedocs.io / en / latest / markup.html # date-range в моем приложении.Но это должно быть угловым компонентом, поэтому впервые за свою короткую карьеру я хотел создать обертку библиотеки, но я думаю, что сделал что-то не так, потому что это не выглядит как оригинальный сборщик.

Вот как этодолжно выглядеть так: enter image description here

А вот так выглядит мой угловой компонент:

enter image description here

Также, когда я хочу выбрать только месяц или год, это выглядит странно:

enter image description here

Хорошо, теперь пришло время увидеть мой код компонента:

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

}

Как вы видите, например, нет выбора диапазона или просто даты начала и окончания, он просто выглядит иначе, поэтому я подумал, что это не загруженные стили, но я могу ошибаться.Мне нужна ваша помощь. Ребята, может быть, моя оболочка выполнена неправильно?

* Сетевая консоль со стилями:

enter image description here

Стили надстроекto index.html и angular.json помогли с некоторыми вещами:

enter image description here

Но все же диапазон между датами не подсвечивается ..

1 Ответ

0 голосов
/ 03 января 2019

Вы уверены, что загрузчик правильно загружен? Вы должны сначала проверить это, и вы должны проверить, загружается ли css для библиотеки впоследствии. попробуйте проверить это с помощью сетевой консоли браузера :) в противном случае попробуйте вызвать стиль библиотеки с помощью cdn:

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

...