如何使用ngX-bootstrap添加弹出日期选择器？

Question

如何使用ngx-bootstrap添加日期选择器？本项目使用Angular2 typescript2 ngx-bootstrap。我正在做以下事情:在HTML中：

<datepicker class="well well-sm main-calendar" [(ngModel)]="dt" [minDate]="minDate" [showWeeks]="false" [dateDisabled]="dateDisabled"></datepicker>

在模块中：

import { DatepickerModule } from 'ngx-bootstrap/datepicker';
@NgModule({
    imports: [
        DatepickerModule.forRoot() 
    ]});

Answer 1

库中当前不存在该功能。这里有一个关于它的讨论，但到目前为止还没有什么进展：

https://github.com/valor-software/ngx-bootstrap/issues/273

我使用bootstrap下拉菜单和datepicker创建了一个解决方法。下面是HTML (请注意，MinDate和dateValue都是我的组件类中的值)：

<div class="dropdown" dropdown #datepickerDropdown="bs-dropdown" [autoClose]="false">
  <div class="input-group" dropdownToggle>
    <input type="text" disabled="disabled" class="form-control" [value]="dateValue | date:'shortDate'" />
    <div class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </div>
  </div>
  <div *dropdownMenu class="dropdown-menu dropdown-date">
    <datepicker [(ngModel)]="dateValue" [minDate]="MinDate" [showWeeks]="false" (selectionDone)="closeDropdown()"></datepicker>
  </div>
</div>

在您的模块中，请确保包含：

import { DatepickerModule } from 'ngx-bootstrap/datepicker';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';

别忘了

@NgModule({
  declarations: [...],
  imports: [
    BsDropdownModule.forRoot(),
    DatepickerModule.forRoot(),
    ... (any other imports)
  ],
  providers: [...],
  bootstrap: [AppComponent]
])

为了在日期选择时自动关闭下拉菜单，我不想让它在点击时自动关闭，以防用户想要更改月份。因此，我们必须使用selectionDate事件。为了正确地创建函数，我们需要将其放入组件中。您需要在组件中包含以下导入：

import { ViewChild, ... } from '@angular/core';
import { BsDropdownDirective } from 'ngx-bootstrap/dropdown';

然后，您可以通过执行以下操作在Component类中引用下拉列表：

@ViewChild('datepickerDropdown') private datepickerDropdown: BsDropdownDirective;

closeDropdown() {
  this.datepickerDropdown.hide();
}

我希望我能帮上忙。这对我有效，但我不确定它是否适用于其他所有人。