Angular 4 的日期选择器答案

【问题标题】：Datepicker for Angular 4Angular 4 的日期选择器
【发布时间】：2017-09-29 17:39:01
【问题描述】：

我正在尝试将 datepicker 添加到基于 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 有什么很酷的日期选择器吗？还是我做错了什么？请帮我解决这个问题。

【问题讨论】：

您提到的第二个 datetimepicker 不适用于 Angular 4。在其 github 上查看此问题：github.com/atais/ng2-eonasdan-datetimepicker/issues/15
@Christian Benseler - 感谢您的回复。但在那之后它就被修复了。请在此处查看：github.com/atais/ng2-eonasdan-datetimepicker/pull/19您对 Angular 4 的 datepicker 有什么建议吗？
你考虑过只使用 angular-material2 吗？他们的日期选择器很棒。他们还有很多其他的模块可以使用。而且，如果你愿意，从技术上讲，你可以只使用他们的日期选择器而不使用其他任何东西，尽管那样可能有点浪费。
谢谢。 @AnilSingh，我会试试的。

标签： angular datepicker

【解决方案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 {}

【讨论】：

【解决方案2】：

查看这个 npm 包。它允许您只需将指令添加到您的输入或元素，并且专为单一和日期范围而设计。

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

date picker directive

【讨论】：