Рендеринг angular2-datetimepicker - PullRequest
Новая
       22

Рендеринг angular2-datetimepicker

0 голосов
/ 02 июля 2018

Я думаю, что этот вопрос может быть решен без обязательного знания виджета. Я использую angular2-datetimepicker (https://www.npmjs.com/package/angular2-datetimepicker) для календарей в моем приложении. Документы довольно просты, хотя они всегда забывают, как это работает для всех. Я получал консольные ошибки и должен был добавить имя атрибут, а также ngDefaultControl для тега, как это: 

<angular2-date-picker [(ngModel)]="date" [settings]="settings" name="angular-calendar" ngDefaultControl></angular2-date-picker>

Компонент имеет ссылку на модель с настройками, указанными в документации: 

    date: Date = new Date();
    settings = {
        bigBanner: true,
        timePicker: false,
        format: 'dd-MM-yyyy',
        defaultOpen: true
    }

При проверке элемента я получаю, что виджет (на мой взгляд) работает нормально, но не отображает: 

<angular2-date-picker _ngcontent-c1="" name="angular-calendar" ngdefaultcontrol="" ng-reflect-name="angular-calendar" ng-reflect-model="Mon Jul 02 2018 11:59:53 GMT+0" class="ng-untouched ng-pristine ng-valid"></angular2-date-picker>

При проверке CSS, влияющего на элемент, я обнаружил, что к нему не применяются особые правила. Любой доход ценится.

1 Ответ

0 голосов
/ 02 июля 2018

Вот рабочий пример стекаблица,

https://stackblitz.com/edit/angular-mmq3ng Команды установки, 

npm install angular2-datetimepicker --save

Импорт файла app.module.ts // возможно, ошибка не импортирована в ваше приложение. 

import { AngularDateTimePickerModule } from 'angular2-datetimepicker';

@NgModule({
  imports: [
    AngularDateTimePickerModule,
  ]
})

Файл машинописного текста, 

export class AppComponent {    
    date: Date = new Date();
    settings = {
        bigBanner: true,
        timePicker: false,
        format: 'dd-MM-yyyy',
        defaultOpen: true
    }
    constructor(){}    
}

HTML-файл (я использовал ту же вещь, о которой вы упоминали), 

<angular2-date-picker [(ngModel)]="date" [settings]="settings" name="angular-calendar" ngDefaultControl></angular2-date-picker>

Вывод экрана,

enter image description here

Убедитесь, что вам нужно импортировать app.module.ts файл, AngularDateTimePickerModule этот модуль.

...