Angular 6 CoreUI 和日期选择器答案

【问题标题】：Angular 6 CoreUI and datepickerAngular 6 CoreUI 和日期选择器
【发布时间】：2018-10-18 12:48:04
【问题描述】：

我使用CoreUI（angular 6 版本）来创建一个简单的面板。

我需要一个日期选择器，但找不到方法。
Angular 材质可能是一个不错的解决方案，但我没有设法将它包含在内 - 看起来存在一些基本冲突。

任何简单的解决方案？

【问题讨论】：

标签： angular-material angular6 core-ui

【解决方案1】：

你安装一个日期时间选择器包：

npm install --save angular-bootstrap-datetimepicker bootstrap moment open-iconic

// added the following to app.module.ts

import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { DlDateTimePickerDateModule } from 'angular-bootstrap-datetimepicker';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    DlDateTimePickerDateModule,
  ],
  providers: [FormsModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

//added the following to  app.component.html

<dl-date-time-picker
	startView="day"
	maxView="year"
	minView="minute"
	minuteStep="5"
	[(ngModel)]="selectedDate"
>
</dl-date-time-picker>

// added following to ./src/styles.css

@import '~bootstrap/dist/css/bootstrap.min.css';
@import '~open-iconic/font/css/open-iconic-bootstrap.css';

【讨论】：

【解决方案2】：

您可以添加ngx-bootstrap，它具有兼容Bootstrap V3 & V4 的BootStrap datepicker。你可以在这里查看：https://valor-software.com/ngx-bootstrap/#/datepicker

要安装 ngx-bootstrap，运行这个命令

ng add ngx-bootstrap  --component datepicker

然后将以下代码添加到您的 AppModule

import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';


@NgModule({
  imports: [BsDatepickerModule.forRoot(),...]
})
export class AppModule(){}

示例用法（在模板处）：

<input type="text" placeholder="Datepicker" class="form-control" bsDatepicker>

【讨论】：