Reputation: 75
I want to disable or read-only the start 2 months after the start date. But if I select any month other than those two months, then count with 2 months on that day.
I want to disable or read-only or the user doesn't select that 2 immediate months from start month.
When i select Sep then count start date to selected date.
component.ts
@Component({
selector: 'app-tax-time-period',
templateUrl: './tax-time-period.component.html',
styleUrls: ['./tax-time-period.component.scss'],
})
export class TaxTimePeriodComponent implements OnInit {
endDateDisable = true;
defaultPickerValue: Date | null = null;
@ViewChild('endDatePicker') endDatePicker!: NzDatePickerComponent;
startDate!: Date;
disabledEndDate = (endDate: Date): boolean => {
if (!endDate || !this.startDate) {
return false;
}
return endDate.getTime() < this.startDate.getTime() ;
}
}
html
<nz-form-item>
<nz-form-label>Start Date</nz-form-label>
<nz-form-control>
{{ startDate ? (startDate | date: "YYYY-MM-dd") : "N/A" }}
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label nzRequired> End Date</nz-form-label>
<nz-form-control
[nzSpan]="5"
nzHasFeedback
[nzErrorTip]="endDateErrorTpl"
>
<nz-month-picker
#endDatePicker
[nzDisabledDate]="disabledEndDate"
nzFormat="yyyy-MM-dd"
formControlName="endDate"
nzPlaceHolder="End"
(nzOnOpenChange)="handleEndOpenChange($event)"
nzMode="month"
[nzDisabled]="endDateDisable"
[nzDefaultPickerValue]="defaultPickerValue"
></nz-month-picker>
Upvotes: 1
Views: 1011
Reputation: 75
@Component({
selector: 'app-tax-time-period',
templateUrl: './tax-time-period.component.html',
styleUrls: ['./tax-time-period.component.scss'],
})
export class TaxTimePeriodComponent implements OnInit {
endDateDisable = true;
defaultPickerValue: Date | null = null;
@ViewChild('endDatePicker') endDatePicker!: NzDatePickerComponent;
startDate!: Date;
disabledEndDate = (endDate: Date): boolean => {
if (!endDate || !this.startDate) {
return false;
}
if (endDate.getMonth() === 0) {
return true;
}
if (endDate.getMonth() === 1) {
return true;
}
if (endDate.getMonth() === 3) {
return true;
}
if (endDate.getMonth() === 4) {
return true;
}
if (endDate.getMonth() === 6) {
return true;
}
if (endDate.getMonth() === 7) {
return true;
}
if (endDate.getMonth() === 9) {
return true;
}
if (endDate.getMonth() === 10) {
return true;
}
return endDate.getTime() < this.startDate.getTime() ;
}
}
If I use it that way my problem will be solved. because getMonth() return an array. If I array index makes true that will be pretty good for me for my problem.
Upvotes: 1