antd的Datepicker插件,时间禁用disabledDate和disabledTime属性

747 阅读1分钟

1.框架angular8
2.ng-zorro7.5x
3.需求:
日期:日期只能选择当日及当日后的日期
时间:当日只能选择当前时间之后的时间点
4.效果展示:

image.png

image.png

5.html代码 :

 <nz-date-picker nzShowTime
      nzFormat="yyyy-MM-dd HH:mm:ss"
      nzPlaceHolder="请选择时间"
      [(ngModel)]="settingData['workingMode']['switchTime']"
      [nzDisabledDate]="disabledDate"
      [nzDisabledTime]="disabledDateTime">
 </nz-date-picker>

ts代码:

// 日期限制
disabledDate = (current): boolean => {
    // Can not select days before today and today
    return current < moment(this.settingData.timeSync['time']).subtract(1, 'days');
}

// 时间限制
disabledDateTime = (dates) => {
    let hours = moment(this.settingData.timeSync['time']).hours(); // 系统时间-时
    let minutes = moment(this.settingData.timeSync['time']).minutes(); // 系统时间-分
    let seconds = moment(this.settingData.timeSync['time']).seconds(); // 系统时间-秒
    //当日只能选择当前时间之后的时间点
    if (dates && moment(dates).date() === moment(this.settingData.timeSync['time']).date()) {
        if (dates && moment(dates).format('HH') === moment(this.settingData.timeSync['time']).format('HH')) {
            if (dates && moment(dates).format('mm') === moment(this.settingData.timeSync['time']).format('mm') ) {
                    return {
                        nzDisabledHours: () => this.range(0, 24).splice(0, hours),
                        nzDisabledMinutes: () => this.range(0, 60).splice(0, minutes),
                        nzDisabledSeconds: () => this.range(0, 60).splice(0, seconds)
                    };
                } else {
                    return {
                        nzDisabledHours: () => this.range(0, 24).splice(0, hours),
                        nzDisabledMinutes: () => this.range(0, 60).splice(0, minutes)
                    };
                }
            } else {
                return {
                    nzDisabledHours: () => this.range(0, 24).splice(0, hours)
                };
            }
        } else {
            return {
                nzDisabledHours: () => [],
            };
        }
    }
range(start: number, end: number): number[] {
    const result: number[] = [];
    for (let i = start; i < end; i++) {
      result.push(i);
    }
    return result;
}