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>
    <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

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要在NG-ZORRO 8.5 DatePicker中使用UTC时间,您可以使用Angular DatePipe来将UTC时间转换为本地日期格式,然后将其传递给DatePicker组件。 在组件模板中,您可以这样使用DatePipe: ``` <nz-date-picker [(ngModel)]="utcDate | date:'yyyy-MM-dd'" nzFormat="yyyy-MM-dd"></nz-date-picker> ``` 其中,`utcDate`是您从服务器或其他来源获取的UTC日期,`date`管道将其转换为本地日期格式。在上面的示例中,我们将日期格式设置为`'yyyy-MM-dd'`,以便它与DatePicker组件的格式匹配。 请注意,如果您需要在表单中使用DatePicker组件,请确保将`[(ngModel)]`绑定到一个本地日期对象而不是字符串。您可以使用DatePipe将UTC日期转换为本地日期对象,如下所示: ``` <ng-container [formGroup]="form"> <nz-form-item> <nz-form-label>UTC Date</nz-form-label> <nz-form-control> <nz-date-picker formControlName="utcDate" [nzShowTime]="true" [nzFormat]="'yyyy-MM-dd HH:mm:ss'"></nz-date-picker> </nz-form-control> </nz-form-item> </ng-container> ``` 在组件类中,您可以使用以下代码将UTC日期转换为本地日期对象: ``` import { DatePipe } from '@angular/common'; // ... constructor(private datePipe: DatePipe) {} // ... ngOnInit() { const utcDate = new Date('2021-01-01T00:00:00Z'); // Replace with your UTC date const localDate = this.datePipe.transform(utcDate, 'yyyy-MM-dd HH:mm:ss'); this.form.get('utcDate').setValue(localDate); } ``` 在上面的示例中,我们将`DatePipe`注入组件类中,并在`ngOnInit()`方法中使用它将UTC日期转换为本地日期对象。然后,我们将本地日期对象设置为表单控件的值。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值