NG-ZORRO - 禁用上一个日期

Answer 1

您可以向

[nzDisabledDate]

提供包含禁用日期逻辑的功能到您的

delivery_date

日期选择器。

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

演示@StackBlitz

Answer 2

您需要使用

nzDisabledDate

属性并提供一个函数，该函数返回一个布尔值，确定是否需要禁用/启用日期。下面是工作示例！

HTML

<nz-date-picker
    nzSize="large"
    nzPlaceHolder="Choose a date"
    formControlName="delivery_date" [nzDisabledDate]="disabledDate"
    >
</nz-date-picker>

TS

  disabledDate = (current: Date): boolean => {
    const issueDateCtrl = this.purchaseOrderForm.get('issue_date');
    const issueDateValue = issueDateCtrl?.value || null;
    // Can not select days before today and today
    return issueDateValue
      ? differenceInCalendarDays(current, new Date(issueDateValue)) < 0
      : false;
  };

完整代码：

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { differenceInCalendarDays, setHours } from 'date-fns';

import { DisabledTimeFn, DisabledTimePartial } from 'ng-zorro-antd/date-picker';

@Component({
  selector: 'nz-demo-date-picker-disabled-date',
  template: `
  <form [formGroup]="purchaseOrderForm">
    <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" [nzDisabledDate]="disabledDate"
        >
      </nz-date-picker>
    </div>
</form>
  `,
  styles: [
    `
      nz-date-picker,
      nz-range-picker {
        margin: 0 8px 12px 0;
      }
    `,
  ],
})
export class NzDemoDatePickerDisabledDateComponent {
  purchaseOrderForm = new FormGroup({
    issue_date: new FormControl(new Date().toISOString()),
    delivery_date: new FormControl(
      '',
      Validators.compose([Validators.required])
    ),
  });

  disabledDate = (current: Date): boolean => {
    const issueDateCtrl = this.purchaseOrderForm.get('issue_date');
    const issueDateValue = issueDateCtrl?.value || null;
    // Can not select days before today and today
    return issueDateValue
      ? differenceInCalendarDays(current, new Date(issueDateValue)) < 0
      : false;
  };
}

Stackblitz 演示