时间选择框(可用于Form)



// html
timepicker [(ngModel)]="start" [nzFormat]="format" (ngModelChange)="changeStart($event)" > timepicker *ngIf='isChange' [(ngModel)]="end" [nzFormat]="format" (ngModelChange)="changeEnd($event)" [nzDisabledHours]="disabledHours" [nzDisabledMinutes]="disabledMinutes"> timepicker *ngIf='isChangeNo' [(ngModel)]="end" [nzFormat]="format" (ngModelChange)="changeEnd($event)" [nzDisabledHours]="disabledHours" [nzDisabledMinutes]="disabledMinutes">
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 = new EventEmitter(); // @Output() public valueChange: EventEmitter = 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(); } }

你可能感兴趣的:(时间选择框(可用于Form))