antDesign 【NG-ZORRO、Angular】日期选择框时间段nz-range-picker设置默认选择日期及限制日期可选范围
下面的代码包含
1.只可以选择今天以后
2.只可以选择今天开始一周内
3.只能选择今天之前的
import { Component } from '@angular/core'; import differenceInCalendarDays from 'date-fns/differenceInCalendarDays'; import setHours from 'date-fns/setHours'; import { DisabledTimeFn, DisabledTimePartial } from 'ng-zorro-antd/date-picker'; @Component({ selector: 'nz-demo-date-picker-disabled-date', template: ` <nz-date-picker nzFormat="yyyy-MM-dd HH:mm:ss" [nzDisabledDate]="disabledDate" [nzDisabledTime]="disabledDateTime" [nzShowTime]="{ nzDefaultOpenValue: timeDefaultValue }" > </nz-date-picker> <br /> <nz-month-picker [nzDisabledDate]="disabledDate" nzPlaceHolder="Select month"></nz-month-picker> <br /> <nz-year-picker [nzDisabledDate]="disabledDate" nzPlaceHolder="Select year"></nz-year-picker> <br /> <nz-range-picker [nzDisabledDate]="disabledDate" [nzDisabledTime]="disabledRangeTime" [nzShowTime]="{ nzHideDisabledOptions: true, nzDefaultOpenValue: timeDefaultValue }" nzFormat="yyyy-MM-dd HH:mm:ss" ></nz-range-picker> `, styles: [ ` nz-date-picker, nz-month-picker, nz-year-picker, nz-range-picker, nz-week-picker { margin: 0 8px 12px 0; } ` ] }) export class NzDemoDatePickerDisabledDateComponent { today = new Date(); timeDefaultValue = setHours(new Date(), 0); range(start: number, end: number): number[] { const result: number[] = []; for (let i = start; i < end; i++) { result.push(i); } return result; } disabledDate = (current: Date): boolean => { // 只能选择今天之前的 return differenceInCalendarDays(current, this.today) > 0; }; disabledDateTime: DisabledTimeFn = () => { return { nzDisabledHours: () => this.range(0, 24).splice(4, 20), nzDisabledMinutes: () => this.range(30, 60), nzDisabledSeconds: () => [55, 56] }; };
public disabledDate1 = (current: Date): boolean => {
console.log('current',current)
console.log('111',this._mycom.setDate(current))
console.log('this.today',this.today)
console.log('differenceInCalendarDays(current, this.today)',differenceInCalendarDays(current, this.today))
return differenceInCalendarDays(current, this.today) > 6 || differenceInCalendarDays(current, this.today) < 0 ; // 只可以选择今天开始一周内
};
public disabledDate2 = (current: Date): boolean => {
return differenceInCalendarDays(current, this.today) < 0; // 只可以选择今天以后
};
disabledRangeTime: DisabledTimeFn = (_value, type?: DisabledTimePartial) => { if (type === 'start') { return { nzDisabledHours: () => this.range(0, 60).splice(4, 20), nzDisabledMinutes: () => this.range(30, 60), nzDisabledSeconds: () => [55, 56] }; } return { nzDisabledHours: () => this.range(0, 60).splice(20, 4), nzDisabledMinutes: () => this.range(0, 31), nzDisabledSeconds: () => [55, 56] }; }; }