angulartypescriptangular-reactive-formsng-zorro-antd

NG-ZORRO - Disable previous date


HTML:

<div class="col-sm-6 col-md-3 form-group">
  <div class="label-mini">
    <span>Issue Date</span>
  </div>
  <nz-date-picker nzSize="large" nzPlaceHolder="Choose a date" formControlName="issue_date">
  </nz-date-picker>
</div>

<div class="col-sm-6 col-md-3 form-group">
  <div class="label-mini">
    <span>Delivery Date</span>
  </div>
  <nz-date-picker
    nzSize="large"
    nzPlaceHolder="Choose a date"
    formControlName="delivery_date"
    >
  </nz-date-picker>
</div>

ts:

initializeForm() {
  this.purchaseOrderForm = new FormGroup({        
    issue_date: new FormControl(new Date().toISOString()),
    delivery_date: new FormControl('', Validators.compose([
      Validators.required,
    ])),
  });
}

I want to disable the previous date based on issue_date.

If issue_date is "05-05-2024", then on delivery_date it will disable the previous date of issue_date. If I change it, it will also work as disabling the previous date wise.

[n.b: issue_date default value is first time set as the current date, so the user can change it if the user needs but if not change it will set as the current date]


Solution

  • You can provide the [nzDisabledDate] with the function consists of disable date logic to your delivery_date date picker.

    <nz-date-picker
      nzSize="large"
      nzPlaceHolder="Choose a date"
      formControlName="delivery_date"
      [nzDisabledDate]="disabledDeliveryDate"
    >
    </nz-date-picker>
    
    disabledDeliveryDate = (date: Date): boolean => {
      let issueDate = this.purchaseOrderForm.controls.issue_date.value;
      if (!issueDate || !date) {
        return false;
      }
    
      return date.getTime() <= new Date(issueDate).getTime();
    };
    

    Demo @ StackBlitz