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