Remove date from from ToDate on selection of fromDate in ng-Bootstrap-CodePudding

I want to clear date from toDate while selcting date from fromDate in ng-bootstrap.

<form  *ngIf="showDateRangeImp">
                  <div >
                    <div >
                      <input  placeholder="yyyy-mm-dd" name="dp" ngbDatepicker #d1="ngbDatepicker"
                        (dateSelect)="impOnDateSelection($event,'from')" [maxDate]="minDate" />
                      <button  (click)="d1.toggle();"
                        type="button"></button>
                    </div>
                  </div>
                  <div >
                    <div >
                      <input  placeholder="yyyy-mm-dd" name="dp" ngbDatepicker #d2="ngbDatepicker"
                        (dateSelect)="impOnDateSelection($event,'to')" [maxDate]="minDate" (input)="model" />
                      <button  (click)="d2.toggle();"
                        type="button"></button>
                    </div>
                  </div>
                </form>

CodePudding user response：

This is one way of clearing the date

Use ngModel and bind the date picker values to the ts file
When impOnDateSelection is triggered check the date picker type and rest the model value

<div  *ngIf="showDateRangeImp">
  <div >
    <div >
      <input
        
        placeholder="yyyy-mm-dd"
        name="dp"
        ngbDatepicker
        #d1="ngbDatepicker"
        (dateSelect)="impOnDateSelection($event, 'from')"
        [maxDate]="minDate"
        [(ngModel)]="fromDate"
      />
      <button
        
        (click)="d1.toggle()"
        type="button"
      ></button>
    </div>
  </div>
  <div >
    <div >
      <input
        
        placeholder="yyyy-mm-dd"
        name="dp"
        ngbDatepicker
        #d2="ngbDatepicker"
        (dateSelect)="impOnDateSelection($event, 'to')"
        [maxDate]="minDate"
        [(ngModel)]="toDate"
      />
      <button
        
        (click)="d2.toggle();"
        type="button"
      ></button>
    </div>
  </div>
</div>

toDate: NgbDateStruct;
fromDate: NgbDateStruct;

impOnDateSelection(value, flag) {
  if (flag === 'from') {
    this.toDate = {
      year: 0,
      month: 0,
      day: 0,
    };
  }
}