Ng-Zorro DatePicker 禁用周末及部分时间配置

示例代码

以下代码展示了如何使用 Ng-Zorro 的 DatePicker 组件禁用周末以及特定的时间段。

import { Component } from '@angular/core';
import { DisabledTimeFn, DisabledTimePartial } from 'ng-zorro-antd/date-picker';

@Component({
  selector: 'nz-demo-date-picker-time',
  template: `
    <nz-date-picker 
      [nzShowTime]="{ nzFormat: 'HH:mm', nzMinuteStep:'30', nzHideDisabledOptions:true }" 
      nzFormat="yyyy-MM-dd HH:mm" 
      [nzDisabledDate]="disabledDate" 
      [nzDisabledTime]="disabledDateTime" 
      [nzShowNow]=false 
      ngModel 
      (ngModelChange)="onChange($event)" 
      (nzOnOk)="onOk($event)"
    ></nz-date-picker>
  `,
  styles: [
    `nz-date-picker, nz-range-picker { margin: 0 8px 12px 0; }`
  ]
})
export class NzDemoDatePickerTimeComponent {
  range(start: number, end: number): number[] {
    const result: number[] = [];
    for (let i = start; i < end; i++) {
      result.push(i);
    }
    return result;
  }

  onChange(result: Date): void {
    console.log('Selected Time: ', result);
  }

  onOk(result:  | [] | ):  {
    .(, result);
  }

  (: < | >):  {
    .(, result);
  }

  
  disabledDate = (: ):  {
     (current.() %  ==  || current.() %  == );
  };

  
  :  =  {
     {
      :  .(, ).(, ).(.(, ).(, )),
      :  .(, ),
      :  [, ]
    };
  };
}