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