时间选择框（可用于Form）

Posted 2020-11-25 zhuangcui

<style>
  .time-range-contianer {
    display: inline-block;
  }
</style>

// html
<div class="time-range-contianer">
    <nz-timepicker
    [(ngModel)]="start"
    [nzFormat]="format"
    (ngModelChange)="changeStart($event)" ></nz-timepicker>
    <nz-timepicker
    *ngIf=‘isChange‘
    [(ngModel)]="end"
    [nzFormat]="format"
    (ngModelChange)="changeEnd($event)"
    [nzDisabledHours]="disabledHours"
    [nzDisabledMinutes]="disabledMinutes"></nz-timepicker>
    <nz-timepicker
    *ngIf=‘isChangeNo‘
    [(ngModel)]="end"
    [nzFormat]="format"
    (ngModelChange)="changeEnd($event)"
    [nzDisabledHours]="disabledHours"
    [nzDisabledMinutes]="disabledMinutes"></nz-timepicker>
</div>

import { Component, Input, Output, EventEmitter, OnInit, forwardRef, SimpleChanges, OnChanges} from ‘@angular/core‘;
import { NG_VALUE_ACCESSOR } from ‘@angular/forms‘;
import { ControlValueAccessor } from ‘@angular/forms/src/directives‘;
import * as moment from ‘moment‘;

@Component({
  selector: ‘app-time-range‘,
  templateUrl: ‘time-range.component.html‘,
  providers: [{ // 固定的，useExisting的是当前的组件
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef( () => TimeRangeComponent),
    multi: true,
  }]
})

// js文件
export class TimeRangeComponent implements OnInit, ControlValueAccessor {
  @Output(‘checked‘) valueChangeTime: EventEmitter<any> = new EventEmitter<any>();
  // @Output() public valueChange: EventEmitter<any> = new EventEmitter();
  constructor() {}
  public start: Date = new Date();
  public end: Date = new Date();
  public h = new Date(this.start).getHours();
  public m = new Date(this.end).getMinutes();
  public s = 0;
  public isChange = true;
  public isChangeNo = false;
  @Input() public format = ‘HH:mm:ss‘;
  @Input() public timeRange = ‘‘;



  private onChange: Function = function () { };
  private onTouched: Function = function () { };

  public get value() {
    let time = ‘‘;
    const start = moment(this.start).format(this.format);
    const end = moment(this.end).format(this.format);
    time = `${start}-${end}`;
    return time;
  }
  @Input()
  public set value(value){
    // console.log(‘set‘)
    console.log(value);
    this.onChange(value);
      this.onTouched();
    this.emitEvent();
  }

  newArray = (start, end) => {
    const result = [];
    for (let i = start; i < end; i++) {
      result.push(i);
    }
    return result;
  }

  disabledMinutes = () => {
    const startH = new Date(this.start).getHours();
    const endH = new Date(this.end).getHours();
    if (startH === endH) {
      return this.newArray(0, this.m);
    }
    return [];
  }

  disabledHours = () => {
    const hours = this.newArray(0, 60);
    hours.splice(this.h, 24 - this.h);
    return hours;
  }



  public changeStart (value) {
    const start = moment(value).format(‘HH:mm:ss‘);
    const arr = start.split(‘:‘);
    this.h = + arr[0];
    this.m = + arr[1];
    this.s = + arr[2];
    if (value > this.end) {
      this.end = this.start;
    }
    this.isChange = !this.isChange;
    this.isChangeNo = !this.isChangeNo;
    // this.disabledHours();
    // this.disabledMinutes(this.h);
    this.emitEvent();
  }

  public changeEnd (value) {
    this.emitEvent();
  }


  public writeValue(value: any) {
    let start = new Date();
    let end = new Date();
    if (value) {
      const arr = value.split(‘-‘);
      if (arr[0]) {
        start = new Date(`2019-01-01 ${arr[0]}`);
      }
      if (arr[1]) {
        end = new Date(`2019-01-01 ${arr[1]}`);
      }
    }
    this.start = start;
    this.end = end;
  }

  public setDisabledState?(isDisabled: boolean) {}

  public registerOnChange(fn: Function) {
    this.onChange = fn;
  }

  public registerOnTouched(fn: Function) {
    this.onTouched = fn;
  }

  public emitEvent() {
    let time = ‘‘;
    const start = moment(this.start).format(this.format);
    const end = moment(this.end).format(this.format);
    time = `${start}-${end}`;
    this.valueChangeTime.emit(time);
    // this.valueChange.emit(time);
  }


  ngOnInit() {
    if (this.timeRange) {
      let start = new Date();
      let end = new Date();
      const arr = this.timeRange.split(‘-‘);
      if (arr[0]) {
        start = new Date(`2019-01-01 ${arr[0]}`);
      }
      if (arr[1]) {
        end = new Date(`2019-01-01 ${arr[1]}`);
      }
      this.start = start;
      this.end = end;
    }
    // this.emitEvent();

  }

}