带有“年月日时分秒”的时间选择器

效果：

说明：我用的是Ant Design of Angular组件库，个人项目使用是Angular CLI 9.0.7。效果是这个组件库里的效果，我在这里想说的是：使用过程当中碰见的bug

一、官网实例

地址：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-picker
      nzFormat="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 today
    return 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]
    };
  };
}

咱们只用第一个实例就行

二、_value

这里会提示有错，在disabledRangeTime: DisabledTimeFn =上面加上这句话

// tslint:disable-next-line:variable-name

三、满屏的报错或控制台报错

天啊！！！为了重现这个错误，个人项目罢工了 (￣▽￣)"……
大体说下：
要实现“时分秒”的选择，就要就[nzShowTime]="{ nzDefaultOpenValue: timeDefaultValue }"这个命令，但这个命令须要import setHours from 'date-fns/setHours';和timeDefaultValue = setHours(new Date(), 0);，咱们以前并无引入date-fns，固然会报错，咱们要作的就是安装这个date-fns包

npm install date-fns --save

有位博主描写的很详细：https://blog.csdn.net/fsxxzq521/article/details/85715213

我在这一步碰见了好多问题，汗……
刚开始我在vscode用npm安装，报错了
我又去命令行里去安装，仍是出错
没办法，我只能删除以前下载的不完整的date-fns，但是又提示我只能管理员删除，哎，又启动管理员命令行才删除掉
我接着又去命令行里去安装，仍是出错(+_+)
好吧！我又使用npm去删除包

以后，重新打开命令行工具，安装成功了，啊……崩溃中又有一种成就感

而后就可使用这个日期选择器了。