disable previous date in angular component

Question

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 disabled previous date based on issue_date

if issue_date is : 05-05-2024 then on delivery_date it will disabled previous date of issue_date, if i change it will also working as disabled previous date wise.

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

Answer 1

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