效果：
说明：我用的是Ant Design of Angular组件库，我的项目使用是Angular CLI 9.0.7。效果是这个组件库里的效果，我在这里想说的是：使用过程中遇见的bug
1、官网实例
地址：https://ng.ant.design/components/date-picker/zh
算了，copy一份吧
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-pickernzFormat="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 => {// Can not select days before today and todayreturn differenceInCalendarDays(current, this.today) > 0;};disabledDateTime: DisabledTimeFn = () => {return {nzDisabledHours: () => this.range(0, 24).splice(4, 20),nzDisabledMinutes: () => this.range(30, 60),nzDisabledSeconds: () => [55, 56]};};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]};};}
我们只用第一个实例就行
2、_value
这里会提示有错，在disabledRangeTime: DisabledTimeFn =上面加上这句话
// tslint:disable-next-line:variable-name
3、满屏的报错或控制台报错
天啊！！！为了重现这个错误，我的项目罢工了 (￣▽￣)"……
大致说下：
要实现“时分秒”的选择，就要就[nzShowTime]="{ nzDefaultOpenValue: timeDefaultValue }"这个命令，但这个命令需要import setHours from 'date-fns/setHours';和timeDefaultValue = setHours(new Date(), 0);，我们之前并没有引入date-fns，当然会报错，我们要做的就是安装这个date-fns包
npm install date-fns --save
有位博主描写的很详细：/fsxxzq521/article/details/85715213
我在这一步遇见了好多问题，汗……
刚开始我在vscode用npm安装，报错了
我又去命令行里去安装，还是出错
没办法，我只能删除之前下载的不完整的date-fns，可是又提示我只能管理员删除，哎，又启动管理员命令行才删除掉
我接着又去命令行里去安装，还是出错(+_+)
好吧！我又使用npm去删除包
之后，从新打开命令行工具，安装成功了，啊……崩溃中又有一种成就感
然后就可以使用这个日期选择器了。
