javascript - 如何从角度的开始月份禁用或只读日期选择器月份？

Question

我想在开始日期后 2 个月禁用或只读开始。但是，如果我选择这两个月以外的任何月份，那么在那一天计算 2 个月。

我想禁用或只读，或者用户不选择从开始月份开始的 2 个直接月份。

当我选择九月然后将开始日期计算到所选日期。

组件.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>

标签： javascriptangularjsangulartypescriptangular-directive

Answer 1

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

如果我这样使用它，我的问题将得到解决。因为 getMonth() 返回一个数组。如果我的数组索引为真，那对我的问题来说将非常好。