如何使用ngX-bootstrap添加弹出日期选择器? [英] How to add pop up date pickar using ngX-bootstrap?

问题描述

如何使用ngx-bootstrap添加datepickar? 该项目使用Angular2 typescript2 ngx-bootstrap. 我正在做以下事情: 在HTML中:

How to add datepickar using ngx-bootstrap? This project uses Angular2 typescript2 ngx-bootstrap. I am doing following things: In 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() 
    ]});

推荐答案

该功能当前在库中不存在.这里有一个讨论，但到目前为止没有任何进展:

The feature does not currently exist in the library. There is a discussion on it here, but nothing has come so far:

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

我使用带有日期选择器的bootstrap下拉列表为它创建了一种解决方法.这是HTML(请注意，MinDate和dateValue都是我的Component类中的值):

I created a workaround for it using the bootstrap dropdown with the datepicker. Here is the HTML (please note that MinDate and dateValue are both values inside my Component class):

<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>

在模块内部，请确保包含以下内容:

Inside your module, make sure to include:

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.您将需要在组件中包括以下导入:

In order to auto-close the dropdown on date selection, I didn't want it to autoclose when clicking in case the user wanted to change months. Therefore we had to use the selectionDate event. To create the function properly, we'll need to pull this into the Component. You will need to include the following imports in the Component:

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

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

You can then reference the dropdown inside the Component class by doing the following:

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

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

我希望我能提供帮助.这对我有用，但是我不确定是否对其他人也有用.

I hope I was able to help. This works for me, but I'm not sure if it will work for everybody else.

这篇关于如何使用ngX-bootstrap添加弹出日期选择器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！