一种形式Angular2的多个Datepicker，具有差异组件 [英] Multiple Datepicker in one form Angular2 with difference component

问题描述

我有一个问题，关于用差异组件以一种形式创建多个日期选择器. 这是示例代码
https://embed.plnkr.co/nRCpS4/

I have issue about create multiple datepicker in one form with difference component. this is example code
https://embed.plnkr.co/nRCpS4/

问题是，如果我单击另一个输入栏，则第一个日期选择器不想关闭，我认为是因为nativeElement.contains检测到另一个输入栏是同一元素.

the problem is if i click another input bar the first datepicker dont want to close, i think because nativeElement.contains detect the another input bar is same element.

有人可以帮我解决我的问题吗?

Can someone please help me solve my problem?

推荐答案

在这种情况下，我最喜欢的解决方案是创建自己的组件，以扩展库提供的组件来满足我的需求.这样，一次处理两个组件上的事件就不会有任何问题，因为每个组件都是自己完成的.这也有助于我避免在上层组件中出现重复代码的混乱情况.这是我的plnkr: https://plnkr.co/edit/zyxJOiliVbi4lym7lAy9

My favorite solution for cases like this is to create my own component that extends the one provided by library to fulfill my needs. Then there are not any problems with handling event on 2 components at once, since each of them makes it by hisself. Also it helps me avoid a mess with duplicated code in my upper components. Here is my plnkr: https://plnkr.co/edit/zyxJOiliVbi4lym7lAy9

@Component({
  selector: 'my-date-picker',
  template: `<div class="input-group">
              <input class="form-control" placeholder="yyyy-mm-dd" [name]="name" [(ngModel)]="model" (ngModelChange)="onModelChange()" ngbDatepicker #dp="ngbDatepicker" required>
              <div class="input-group-addon" (click)="dp.toggle();">
                  <i class="fa fa-calendar" aria-hidden="true"></i>
              </div>
            </div>`,
  providers: [
    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MyDatePickerComponent), multi: true }]
})
export class MyDatePickerComponent implements ControlValueAccessor {
  @Input() name: string = '';
  @Input() model: any;
  @ViewChild('dp') dp;
  private propagateChange:any = () => {};

  constructor(private _eref: ElementRef) { }

  @HostListener('document:click', ['$event'])
  onClick(event) {
    if (this._eref.nativeElement.contains(event.target)) return true;
    setTimeout(() => this.dp.close(), 10);
  }

  onModelChange() {
    this.propagateChange(this.model);
  }

  writeValue(value) {
      this.model = value;
  }

  registerOnChange(fn) {
    this.propagateChange = fn;
  }

  registerOnTouched() {}
}

如果您不熟悉该代码，请阅读:

If the code looks unfamiliar to you, please read: https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

通过使用这段代码，我可以像下面这样使用日期选择器:

By using this piece of code I am allowed to use my date-picker just like:

<my-date-picker name="dp1" [(ngModel)]="newItem.EndTime"></my-date-picker>
<my-date-picker name="dp2" [(ngModel)]="newItem.StartTime"></my-date-picker>

但是，您还可以保留所有代码，并稍微改善关闭条件:

However, you can also leave all your code just like it is and improve your closing condition a bit:

if (!this._eref.nativeElement.contains(event.target) || !this.dynamicId._elRef.nativeElement.parentNode.contains(event.target)) {
      setTimeout(() => this.dynamicId.close(), 10);
}

这篇关于一种形式Angular2的多个Datepicker，具有差异组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！