Multiple Datepicker in one form Angular2 with difference component

问题

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

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?

回答1:

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);
}

回答2:

I've updated the template and added closeDatePicker(dx) functions in the (click) handlers (click)="d1.toggle(); openDatepicker(d1); closeDatepicker(d2)"

So when you click to open d1, you explicitly close d2 and vice-versa.

  template: `
    <div class="input-group" style="margin-top:50px">
        <input class="form-control" placeholder="yyyy-mm-dd" name="dp1" [(ngModel)]="newItem.EndTime"  ngbDatepicker #d1="ngbDatepicker" required>
        <div class="input-group-addon"  (click)="d1.toggle(); openDatepicker(d1); closeDatepicker(d2)" >
            <i class="fa fa-calendar" aria-hidden="true"></i>
        </div>
    </div>

    <div class="input-group">
        <input class="form-control" placeholder="yyyy-mm-dd" name="dp2" [(ngModel)]="newItem.StartTime"  ngbDatepicker #d2="ngbDatepicker" #d3 required>
        <div class="input-group-addon" (click)="d2.toggle(); openDatepicker(d2); closeDatepicker(d1)" >
            <i class="fa fa-calendar" aria-hidden="true"></i>
        </div>
    </div>
  `

Then you just need to add that function into your controller.

  closeDatepicker(id){
    id.close();
  }

That should do the trick!

回答3:

    <div class="input-group" style="margin-top:50px">
    <input class="form-control" placeholder="yyyy-mm-dd" name="dp1" [(ngModel)]="newItem.EndTime"  ngbDatepicker #d1="ngbDatepicker" required>
    <div class="input-group-addon"  (click)="d1.toggle(); d2.toggle(); openDatepicker(d1)" >
        <i class="fa fa-calendar" aria-hidden="true"></i>
    </div>
</div>

<div class="input-group">
    <input class="form-control" placeholder="yyyy-mm-dd" name="dp2" [(ngModel)]="newItem.StartTime"  ngbDatepicker #d2="ngbDatepicker" #d3 required>
    <div class="input-group-addon" (click)="d2.toggle(); d1.toggle(); openDatepicker(d2)" >
        <i class="fa fa-calendar" aria-hidden="true"></i>
    </div>
</div>

try to toggle other datepicker when clicking the next button.

来源：https://stackoverflow.com/questions/45004293/multiple-datepicker-in-one-form-angular2-with-difference-component

标签

angular

typescript

datepicker