1.框架angular8
2.ng-zorro7.5x
3.需求:
日期:日期只能选择当日及当日后的日期
时间:当日只能选择当前时间之后的时间点
4.效果展示:
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;
}