Question

如何使用ngx-bootstrap添加datepickar？该项目使用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

我使用带有datepicker的bootstrap下拉列表为它创建了一个变通方法。这是HTML（请注意，MinDate和dateValue都是我的Component类中的值）：

<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事件。要正确创建函数，我们需要将其拉入Component。您需要在组件中包含以下导入：

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

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

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

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

我希望我能够提供帮助。这对我有用，但我不确定它是否适用于其他所有人。

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

1 个答案: