zy-pc/src/app/views/new-statistics/components/custom-change-date/custom-change-date.component.html

<div class="customChangeDate">
  <div class="searchDataItem">
    <nz-radio-group [(ngModel)]="dateType" (ngModelChange)="changeDateType($event)">
      <label *ngFor="let data of dateTypes" nz-radio-button [nzValue]="data.value">{{data.label}}</label>
    </nz-radio-group>
  </div>
  <div class="searchDataItem">
    <span class="label">建单时间</span>：
    <nz-range-picker *ngIf="dateType=='day'" [(ngModel)]="dateRange" [nzAllowClear]='false'
      [nzDisabledDate]="disabledDate" (ngModelChange)="changeDate($event)">
    </nz-range-picker>
    <nz-month-picker *ngIf="dateType=='month'" [(ngModel)]="monthRangeStart" [nzDisabledDate]="disabledMonthStart"
      (ngModelChange)="changeMonthStart($event)" nzPlaceHolder="请选择开始月份">
    </nz-month-picker>
    <span *ngIf="dateType=='month'"> ~ </span>
    <nz-month-picker *ngIf="dateType=='month'" [(ngModel)]="monthRangeEnd" [nzDisabledDate]="disabledMonthEnd"
      (ngModelChange)="changeMonthEnd($event)" nzPlaceHolder="请选择截止月份">
    </nz-month-picker>
    <nz-year-picker *ngIf="dateType=='year'" [(ngModel)]="yearRangeStart" [nzDisabledDate]="disabledYearStart"
      (ngModelChange)="changeYearStart($event)" nzPlaceHolder="请选择开始年份">
    </nz-year-picker>
    <span *ngIf="dateType=='year'"> ~ </span>
    <nz-year-picker *ngIf="dateType=='year'" [(ngModel)]="yearRangeEnd" (ngModelChange)="changeYearEnd($event)"
      [nzDisabledDate]="disabledYearEnd" nzPlaceHolder="请选择截止年份">
    </nz-year-picker>
  </div>
  <div class="searchDataItem ml8">
    <nz-select class="formItem" [ngStyle]="{width: '92px'}" [nzDropdownMatchSelectWidth]="false" [nzShowSearch]="false"
      nzPlaceHolder="请选择时间" [(ngModel)]="defRange" (ngModelChange)="changeDateRange($event)">
      <nz-option nzLabel="{{data.label}}" nzValue="{{data.id}}" *ngFor="let data of defRanges"></nz-option>
    </nz-select>
  </div>
</div>