ngx-日期选择器未以 angular6 形式显示答案

【问题标题】：ngx- date picker not showing in angular6 formngx-日期选择器未以 angular6 形式显示
【发布时间】：2019-05-03 05:51:28
【问题描述】：

我正在尝试在我的 Angular6 应用程序中导入 ngx Bootstrap 日期选择器，为此我遵循了以下步骤

到 npm 安装 ngx-bootstrap

npm install ngx-bootstrap --save

已安装引导程序 4

npm install bootstrap@4 --save

在 angular.json 文件中并在样式属性中指定 Bootstrap 样式表 (bootstrap.min.css) 的路径

  "styles": [

            "src/styles.css",
           "node_modules/bootstrap/dist/css/bootstrap.min.css",
           "node_modules/ngx-bootstrap/datepicker/bs-datepicker.css"

        ],

在 Angular 中使用 ngx-bootstrap 日期选择器：

在 app.module.ts 文件中，导入 BsDatepickerModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { FormGroup } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { StudentParentRegistrationComponent } from './student-parent-registration/student-parent-registration.component';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
@NgModule({
  declarations: [
    AppComponent,
    StudentParentRegistrationComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    BsDatepickerModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

html文件

<nav class="navbar navbar-expand-lg">Header
</nav>
<div class="container">
  <h2 class="text-center">Registration</h2>
  <h3>Student Registration</h3>


  <div class="row">
    <div class="col-sm-6">
      <div class="form-group">
        <label for="usn" class="control-label">USN</label>
        <input type="usn" class="form-control" id="usn" name="usn" placeholder="USN">
      </div>
    </div>
    <div class="col-sm-6">
      <div class="form-group">
        <label for="firstName" class="control-label">First Name</label>
        <input type="firstName" class="form-control" id="firstName" name="firstName" placeholder="FirstName">
      </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-6">
        <div class="form-group">
<label for="dateOfBirth" class="control-label">Date Of Birth</label>
<input type="text" class="form-control" id="dateOfBirth" name="dateOfBirth" bsDatePicker [(ngModel)]="dateOfBirth" placeholder="DateOfBirth">
</div>
</div>
</div>

</div>
<div class="card-footer">
  footer
</div>

执行这些步骤后，日期选择器未显示。任何人都请帮我解决这个问题。

【问题讨论】：

标签： ngx-bootstrap

【解决方案1】：

你需要调用 show 方法。

您可以像这样在模板中直接调用它：

<input type="text" class="form-control" id="dateOfBirth" name="dateOfBirth" bsDatePicker #dp="bsDatepicker" [(ngModel)]="dateOfBirth" placeholder="DateOfBirth">

// call the dp.show() method either by attaching the click event on the input or add a button alongside it

或者将其注入到组件或服务中并调用其中的方法

【讨论】：