/
range.component.ts
116 lines (100 loc) · 3.33 KB
/
range.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import { forwardRef, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { deepMergeKey, fixEndTimeOfRange, InputBoolean } from '@delon/util';
import { NzRangePickerComponent } from 'ng-zorro-antd/date-picker';
import { DatePickerConfig, DateRangePickerConfig, DateRangePickerShortcut, DateRangePickerShortcutItem } from './date-picker.config';
@Component({
selector: 'range-picker',
exportAs: 'rangePicker',
templateUrl: './range.component.html',
providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: forwardRef(() => RangePickerComponent),
},
],
})
export class RangePickerComponent implements ControlValueAccessor {
private onChangeFn: (val: Date) => void;
private _shortcut: DateRangePickerShortcut;
private _cog: DateRangePickerConfig;
@ViewChild('comp', { static: false }) private comp: NzRangePickerComponent;
value: Date[] = [];
@Input() ngModelEnd: Date;
@Input()
set shortcut(val: DateRangePickerShortcut | null) {
const item = deepMergeKey({}, true, this._cog.shortcuts, val == null ? {} : val) as DateRangePickerShortcut;
if (typeof val === 'boolean') {
item.enabled = val;
}
this._shortcut = item;
}
get shortcut() {
return this._shortcut;
}
@Output() readonly ngModelEndChange = new EventEmitter<Date>();
// #region Native properties
@Input() nzAllowClear = true;
@Input() nzAutoFocus = false;
@Input() nzClassName: string;
@Input() nzDisabled: boolean;
@Input() nzSize: string;
@Input() nzStyle: string;
@Input() nzDisabledDate: (d: Date) => boolean;
@Input() nzLocale: object;
@Input() nzPopupStyle: object;
@Input() nzDropdownClassName: string;
@Input() nzPlaceHolder: string | string[];
@Output() readonly nzOnOpenChange = new EventEmitter<boolean>();
// range
@Input() nzDateRender: any;
@Input() nzFormat: any;
@Input() nzDisabledTime: any;
@Input() nzRenderExtraFooter: any;
@Input() nzShowTime: any;
@Input() @InputBoolean() nzShowToday: boolean = true;
@Input() nzMode: any;
@Input() nzRanges: any;
@Output() readonly nzOnPanelChange = new EventEmitter<any>();
@Output() readonly nzOnOk = new EventEmitter<any>();
// #endregion
constructor(cog: DatePickerConfig) {
this._cog = deepMergeKey(new DateRangePickerConfig(), true, cog && cog.range);
Object.assign(this, this._cog);
}
_nzOnOpenChange(e: any) {
this.nzOnOpenChange.emit(e);
}
_nzOnPanelChange(e: any) {
this.nzOnPanelChange.emit(e);
}
_nzOnOk(e: any) {
this.nzOnOk.emit(e);
}
valueChange(e: [Date, Date]) {
e = fixEndTimeOfRange(e);
this.onChangeFn(e[0]);
this.ngModelEnd = e[1];
this.ngModelEndChange.emit(e[1]);
}
writeValue(value: Date): void {
this.value = value && this.ngModelEnd ? [value, this.ngModelEnd] : [];
}
registerOnChange(fn: (val: Date) => void): void {
this.onChangeFn = fn;
}
registerOnTouched(_fn: () => void): void {
// this.onTouchedFn = fn;
}
setDisabledState(disabled: boolean): void {
this.nzDisabled = disabled;
}
clickShortcut(item: DateRangePickerShortcutItem) {
this.value = item.fn(this.value as any);
this.valueChange(this.value as [Date, Date]);
if (this._shortcut.closed) {
this.comp.closeOverlay();
}
}
}