ng-zorro DatePicker日期选择框禁用周末,禁用部分时间

最新推荐文章于 2024-05-17 13:52:13 发布

置顶云墨cloudMel

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量1.7k

点赞数

分类专栏： ng-zorro

本文链接：https://blog.youkuaiyun.com/weixin_42481234/article/details/113618599

版权

ng-zorro 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用Angular和ng-zorro-antd库实现日期选择器组件，并演示了如何禁用特定日期和时间选项。具体包括禁用周末日期及指定时间范围外的小时、分钟和秒。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>
    <br />
   
  `,
  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: Date | Date[] | null): void {
    console.log('onOk', result);
  }

  onCalendarChange(result: Array<Date | null>): void {
    console.log('onCalendarChange', result);
  }

 // 禁用weekend
   disabledDate = (current: Date): boolean => { 
    return (current.getDate()%7 == 6 || current.getDate()%7 == 0)
   };
 
   // 禁用time
   disabledDateTime: DisabledTimeFn = () => {
    return {
      nzDisabledHours: () => this.range(0, 24).splice(0, 10).concat(this.range(0, 24).slice(16,24)),
      nzDisabledMinutes: () => this.range(31, 60),
      nzDisabledSeconds: () => [55, 56]
    };
  };

   
}

https://nc22cx--run.stackblitz.io