datepicker - 渲染 angular2-datetimepicker

Question

我认为这个问题可能会在不一定知道小部件的情况下得到解决。我在我的应用程序中使用 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 时，我发现没有适用于它的特定规则。任何收入都会受到赞赏。

标签： datepickerangular5

Answer 1

这是一个工作示例stackblitz，

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>

输出截图，

确保你必须导入app.module.ts文件，AngularDateTimePickerModule这个模块。