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