0

如何使用 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() 
    ]});
4

1 回答 1

0

该功能目前在库中不存在。这里有一个讨论，但到目前为止什么都没有：

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

我使用带有日期选择器的引导下拉菜单为其创建了一个解决方法。这是 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 事件。要正确创建函数，我们需要将其拉入组件中。您需要在组件中包含以下导入：

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

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

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

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

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

于 2017-06-13T21:07:01.810 回答