Angular 4的日期选择器

Question

我正在尝试将日期选择器添加到基于Angular 4的应用程序中。 我尝试使用ng2-datepicker。 通过npm安装ng2-datepicker后，我像这样导入模块：

import {DatePickerModule} from 'ng2-datepicker-bootstrap';

但是webpack提示找不到DatePickerModule模块。我已经尝试使用ng2-eonasdan-datetimepicker，我在app.module.ts中像这样导入：

import {A2Edatetimepicker} from 'ng2-eonasdan-datetimepicker';

@NgModule({
  imports: [
    A2Edatetimepicker
  ]
})

webpack 报错：

错误：A2Edatetimepicker 不是一个 NgModule

我不确定问题出在哪里。有没有适用于 Angular 4 的很棒的日期选择器？还是我做错了什么？ 请帮助我解决这个问题。

- Deimos620

---

你提到的第二个日期选择器不适用于Angular 4。请查看其Github上的问题：https://github.com/atais/ng2-eonasdan-datetimepicker/issues/15 - Christian Benseler

@Christian Benseler - 感谢您的回复。但是问题已经在此之后得到解决。请在这里查看： https://github.com/atais/ng2-eonasdan-datetimepicker/pull/19 您对Angular 4的日期选择器有什么建议吗？ - Deimos620

您是否考虑过仅使用angular-material2？它们的日期选择器非常棒。而且他们有很多其他模块可供使用。并且，如果您想要的话，您可以技术上仅使用它们的日期选择器，而不使用任何其他模块，尽管这可能有点浪费。 - Jun Kang

谢谢。@AnilSingh，我会尝试。 - Deimos620

Answer 1

运行

npm install ng2-datepicker --save

然后在您的根模块中：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgDatepickerModule } from 'ng2-datepicker';

@NgModule({
  imports: [
    BrowserModule,
    NgDatepickerModule
  ],
  declarations: [ AppComponent ],
  exports: [ AppComponent ]
})
export class AppModule {}

- Melchia

Answer 2

看看这个npm包。它允许您只需将指令添加到输入或元素中，旨在用于单个和日期范围。

<input type="text" placeholder="Input Date" date-picker (dateselected)="dateSelected($event)" />

日期选择器指令

- Ricky