Md.Arif Shakil Nobin
Md.Arif Shakil Nobin

Reputation: 75

How to disable or read-only date picker month from start month in angular?

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.

enter image description here

I want to disable or read-only or the user doesn't select that 2 immediate months from start month.

enter image description here

When i select Sep then count start date to selected date.

enter image description here

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

Answers (1)

Md.Arif Shakil Nobin
Md.Arif Shakil Nobin

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

Related Questions