前言
最近刚接触的NG-ZORRO,今天小编给大家分享一下NG-ZORRO中,时间控件限制时间选择的知识。
html
<nz-range-picker
(click)="picker()"
[(ngModel)]="dateValue"
name="dateValue"
[nzDisabledDate]="disabledDate"
[nzDisabledTime]="disabledRangeTime"
[nzShowTime]="{ nzHideDisabledOptions: true, nzDefaultOpenValue: timeDefaultValue }"
nzFormat="yyyy-MM-dd HH:mm:ss"
></nz-range-picker>
ts
range(start: number, end: number): number[] {
const result = [];
for (let i = start; i < end; i++) {
result.push(i);
}
return result;
}
disabledDate = (current: Date): boolean => {
return differenceInCalendarDays(current, this.today) < 0;
}
disabledRangeTime = (value: Date[], type: 'start' | 'end'): object => {
for (let i = 0; i < this.dateValue.length; i++) {
// 选择日
this.data1 = this.dateValue[0].getFullYear() + '-' + (this.dateValue[0].getMonth() + 1) + '-' + this.dateValue[0].getDate() + ' '
+ this.dateValue[0].getHours() + ':' + this.dateValue[0].getMinutes() + ':' + this.dateValue[0].getSeconds();
}
if (type === 'start') {
// 选择日日期跟服务器日期相同,限制时间控件不可以选当前时间以及之前的回见
if (this.data1.substr(0, 10) === this.time.substr(0, 10)) {
this.hours = this.time.substr(11, 2);
this.minutes = this.time.substr(14, 2);
this.seconds = this.time.substr(17, 2);
console.log('this.hours');
console.log('this.minutes');
console.log('this.seconds');
return {
nzDisabledHours: () => this.range(0, 60).splice(0, this.hours),
nzDisabledMinutes: () => this.range(0, this.minutes),
nzDisabledSeconds: () => [55, this.seconds]
};
} else {
return {
nzDisabledHours: () => this.range(0, 60).splice(0, this.hours),
nzDisabledMinutes: () => this.range(0, this.minutes),
nzDisabledSeconds: () => [55, 56]
};
}
}
return {
nzDisabledHours: () => this.range(0, 60).splice(0, 0),
nzDisabledMinutes: () => this.range(0, 0),
nzDisabledSeconds: () => [55, 56]
};
}
/**
* 点击日期控件获取服务器时间
* @author
* @since
*/
picker() {
const url = 'exam-web/examination/selTime';
this.http.get(url).subscribe(
res => {
if (res.json().code === ResponseCode.SUCCESSCODE) {
this.time = res.json().data;
console.log(this.time);
console.log(res.json());
} else if (res.json().code === ResponseCode.FAILCODE) {
this.tipMsgService.error('警告', '考试添加失败!');
}
}
);
}
选择开始日期(2018/12/16)和结束日期(2018/12/17)
选择开开始时间和结束时间
服务器时间
大家看以上三张图,有没有发现时间控件有些时间是不可以选择的,是因为在ts中限制了开始时间不能大于当前时间,这样限制住控件不在选择范围内的时间不可编辑,很方便用户使用。