• Home
  • Features
  • Pricing
  • Docs
  • Announcements
  • Sign In

atinc / ngx-tethys / 14a25ef9-5eaf-4749-b9b5-9130d7a85531

25 Mar 2025 09:28AM UTC coverage: 90.174% (-0.01%) from 90.188%
14a25ef9-5eaf-4749-b9b5-9130d7a85531

push

circleci

web-flow
feat(date-picker): handle zh-cn format show (#3315)

* feat(date-picker): handle zh-cn format show

* feat(date-picker): handle zh-cn format show

5591 of 6865 branches covered (81.44%)

Branch coverage included in aggregate %.

12 of 13 new or added lines in 4 files covered. (92.31%)

8 existing lines in 4 files now uncovered.

13351 of 14141 relevant lines covered (94.41%)

991.77 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

95.29
/src/date-picker/picker.component.ts
1
import { getFlexiblePositions, ThyPlacement } from 'ngx-tethys/core';
2
import { coerceBooleanProperty, TinyDate } from 'ngx-tethys/util';
3

4
import { CdkConnectedOverlay, CdkOverlayOrigin, ConnectedOverlayPositionChange } from '@angular/cdk/overlay';
5
import {
6
    AfterViewInit,
7
    ChangeDetectionStrategy,
8
    ChangeDetectorRef,
9
    Component,
10
    ElementRef,
11
    EventEmitter,
12
    inject,
13
    Input,
14
    OnChanges,
15
    Output,
16
    SimpleChanges,
17
    ViewChild
18
} from '@angular/core';
1✔
19

20
import { AsyncPipe, NgClass, NgTemplateOutlet } from '@angular/common';
159✔
21
import { scaleMotion, scaleXMotion, scaleYMotion } from 'ngx-tethys/core';
159✔
22
import { ThyI18nService } from 'ngx-tethys/i18n';
159✔
23
import { ThyIcon } from 'ngx-tethys/icon';
159✔
24
import { ThyInputDirective } from 'ngx-tethys/input';
159✔
25
import { ThyEnterDirective } from 'ngx-tethys/shared';
159✔
26
import { DateHelperService } from './date-helper.service';
159✔
27
import { CompatibleValue, RangePartType } from './inner-types';
159✔
28
import { getFlexibleAdvancedReadableValue } from './picker.util';
159✔
29
import { ThyDateGranularity } from './standard-types';
159✔
30

159✔
31
/**
159✔
32
 * @private
159✔
33
 */
159✔
34
@Component({
159✔
35
    selector: 'thy-picker',
159✔
36
    exportAs: 'thyPicker',
37
    templateUrl: './picker.component.html',
UNCOV
38
    changeDetection: ChangeDetectionStrategy.OnPush,
×
39
    standalone: true,
40
    imports: [CdkOverlayOrigin, ThyInputDirective, ThyEnterDirective, AsyncPipe, NgTemplateOutlet, ThyIcon, NgClass, CdkConnectedOverlay],
41
    animations: [scaleXMotion, scaleYMotion, scaleMotion]
161✔
42
})
161✔
43
export class ThyPicker implements OnChanges, AfterViewInit {
44
    private changeDetector = inject(ChangeDetectorRef);
UNCOV
45
    private dateHelper = inject(DateHelperService);
×
46
    private i18n = inject(ThyI18nService);
47

48
    @Input() isRange = false;
165✔
49
    @Input() open: boolean | undefined = undefined;
165✔
50
    @Input() disabled: boolean;
51
    @Input() placeholder: string | string[];
52
    @Input() readonly: boolean;
656✔
53
    @Input() allowClear: boolean;
54
    @Input() autoFocus: boolean;
55
    @Input() className: string;
320✔
56
    @Input() size: 'sm' | 'xs' | 'lg' | 'md' | 'default';
320✔
57
    @Input() suffixIcon: string;
312✔
58
    @Input() placement: ThyPlacement = 'bottomLeft';
59
    @Input() flexible: boolean = false;
60
    @Input() mode: string;
61
    @Input({ transform: coerceBooleanProperty }) hasBackdrop: boolean;
62
    @Input() separator: string;
1,561✔
63
    @Output() blur = new EventEmitter<Event>();
64
    @Output() readonly valueChange = new EventEmitter<TinyDate | TinyDate[] | null>();
65
    @Output() readonly openChange = new EventEmitter<boolean>(); // Emitted when overlay's open state change
665✔
66
    @Output() readonly inputChange = new EventEmitter<string>();
67

68
    @ViewChild('origin', { static: true }) origin: CdkOverlayOrigin;
69
    @ViewChild(CdkConnectedOverlay, { static: true }) cdkConnectedOverlay: CdkConnectedOverlay;
337✔
70
    @ViewChild('pickerInput', { static: true }) pickerInput: ElementRef;
8✔
71
    @ViewChild('overlayContainer', { static: false }) overlayContainer: ElementRef<HTMLElement>;
5✔
72

73
    @Input()
74
    get format() {
3✔
75
        return this.innerFormat;
76
    }
77

78
    set format(value: string) {
79
        this.innerFormat = value;
159✔
80
        this.updateReadableDate(this.innerValue);
159✔
81
    }
1✔
82

83
    @Input()
84
    get flexibleDateGranularity() {
85
        return this.innerflexibleDateGranularity;
59✔
86
    }
87

88
    set flexibleDateGranularity(granularity: ThyDateGranularity) {
5✔
89
        this.innerflexibleDateGranularity = granularity;
5!
90
        this.updateReadableDate(this.innerValue);
5✔
91
    }
92

5✔
93
    @Input()
94
    get value() {
95
        return this.innerValue;
17✔
96
    }
17✔
97

17✔
98
    set value(value: TinyDate | TinyDate[] | null) {
99
        this.innerValue = value;
100
        if (!this.entering) {
8!
101
            this.updateReadableDate(this.innerValue);
×
102
        }
103
    }
8!
104

8✔
105
    private innerflexibleDateGranularity: ThyDateGranularity;
106

107
    private innerFormat: string;
125✔
108

124✔
109
    private innerValue: TinyDate | TinyDate[] | null;
124✔
110

124✔
111
    entering = false;
124✔
112

124!
113
    prefixCls = 'thy-calendar';
124✔
114

115
    isShowDatePopup = false;
116

117
    overlayOpen = false; // Available when "open"=undefined
118

119
    overlayPositions = getFlexiblePositions(this.placement, 4);
111✔
120

57✔
121
    get realOpenState(): boolean {
57✔
122
        // The value that really decide the open state of overlay
57✔
123
        return this.isOpenHandledByUser() ? !!this.open : this.overlayOpen;
57✔
124
    }
125

126
    get readonlyState(): boolean {
127
        return this.isRange || this.readonly || this.mode !== 'date';
129✔
128
    }
129✔
129

130
    ngOnChanges(changes: SimpleChanges): void {
131
        // open by user
132
        if (changes.open && changes.open.currentValue !== undefined) {
60✔
133
            if (changes.open.currentValue) {
60✔
134
                this.showDatePopup();
60✔
135
            } else {
136
                this.closeDatePopup();
137
            }
138
        }
128✔
139
    }
125✔
140

141
    ngAfterViewInit(): void {
142
        this.overlayPositions = getFlexiblePositions(this.placement, 4);
143
        if (this.autoFocus) {
12✔
144
            this.focus();
145
        }
146
    }
52✔
147

148
    focus(): void {
149
        this.pickerInput.nativeElement.focus();
128✔
150
    }
151

152
    onBlur(event: FocusEvent) {
6✔
153
        this.blur.emit(event);
6✔
154
        if (this.entering) {
6✔
155
            this.valueChange.emit(this.pickerInput.nativeElement.value);
6✔
156
        }
157
        this.entering = false;
158
    }
×
159

160
    onInput(event: InputEvent) {
161
        this.entering = true;
656✔
162
        const inputValue = (event.target as HTMLElement)['value'];
259✔
163
        this.inputChange.emit(inputValue);
164
    }
397✔
165

249✔
166
    onEnter() {
167
        if (this.readonlyState) {
168
            return;
148✔
169
        }
170
        this.valueChange.emit(this.pickerInput.nativeElement.value || this.getReadableValue(new TinyDate()));
171
        this.entering = false;
172
    }
173

1,689✔
174
    showOverlay(): void {
175
        if (!this.realOpenState) {
176
            this.overlayOpen = true;
177
            this.showDatePopup();
687✔
178

264✔
179
            this.openChange.emit(this.overlayOpen);
46✔
180
            setTimeout(() => {
181
                if (this.cdkConnectedOverlay && this.cdkConnectedOverlay.overlayRef) {
182
                    this.cdkConnectedOverlay.overlayRef.updatePosition();
218✔
183
                }
218✔
184
            });
218✔
185
        }
186
    }
187

188
    hideOverlay(): void {
423✔
189
        if (this.realOpenState) {
423✔
190
            this.overlayOpen = false;
191
            this.closeDatePopup();
192

193
            this.openChange.emit(this.overlayOpen);
194
            this.focus();
195
        }
205✔
196
    }
13✔
197

198
    showDatePopup() {
199
        this.isShowDatePopup = true;
192✔
200
        this.changeDetector.markForCheck();
201
    }
202

203
    closeDatePopup() {
656✔
204
        // Delay 200ms before destroying the date-popup, otherwise you will not see the closing animation.
205
        setTimeout(() => {
206
            this.isShowDatePopup = false;
207
            this.changeDetector.markForCheck();
208
        }, 200);
638✔
209
    }
638✔
210

40✔
211
    onClickInputBox(): void {
212
        if (!this.disabled && !this.readonly && !this.isOpenHandledByUser()) {
598✔
213
            this.showOverlay();
214
        }
1✔
215
    }
216

217
    onClickBackdrop(): void {
218
        this.hideOverlay();
219
    }
220

221
    onOverlayDetach(): void {
222
        this.hideOverlay();
223
    }
224

225
    onPositionChange(position: ConnectedOverlayPositionChange): void {
226
        this.changeDetector.detectChanges();
227
    }
228

229
    onClickClear(event: MouseEvent): void {
230
        event.preventDefault();
231
        event.stopPropagation();
232

233
        this.innerValue = this.isRange ? [] : null;
234
        this.valueChange.emit(this.innerValue);
235
    }
236

237
    getPartTypeIndex(partType: RangePartType): number {
238
        return { left: 0, right: 1 }[partType];
239
    }
240

241
    isEmptyValue(value: CompatibleValue | null): boolean {
242
        if (value === null) {
243
            return true;
1✔
244
        } else if (this.isRange) {
245
            return !value || !Array.isArray(value) || value.every(val => !val);
246
        } else {
247
            return !value;
248
        }
249
    }
250

251
    // Whether open state is permanently controlled by user himself
252
    isOpenHandledByUser(): boolean {
253
        return this.open !== undefined;
254
    }
255

256
    getReadableValue(tinyDate: TinyDate | TinyDate[]): string | null {
257
        let value: TinyDate;
258
        if (this.isRange) {
259
            if (this.flexible && this.innerflexibleDateGranularity !== 'day') {
260
                return getFlexibleAdvancedReadableValue(
261
                    tinyDate as TinyDate[],
262
                    this.innerflexibleDateGranularity,
263
                    this.separator,
264
                    this.i18n.getLocale()
265
                );
266
            } else {
267
                const start = tinyDate[0] ? this.formatDate(tinyDate[0]) : '';
268
                const end = tinyDate[1] ? this.formatDate(tinyDate[1]) : '';
269
                return start && end ? `${start}${this.separator}${end}` : null;
270
            }
271
        } else {
272
            value = tinyDate as TinyDate;
273
            return value ? this.formatDate(value) : null;
274
        }
275
    }
276

277
    formatDate(value: TinyDate) {
278
        // dateHelper.format() 使用的是 angular 的 format,不支持季度,修改的话,改动比较大。
279
        // 此处通过对 innerFormat 做下判断,如果是季度的 format,使用 date-fns 的 format()
280
        if (this.innerFormat && (this.innerFormat.includes('q') || this.innerFormat.includes('Q'))) {
281
            return value.format(this.innerFormat);
282
        } else {
283
            return this.dateHelper.format(value.nativeDate, this.innerFormat);
284
        }
285
    }
286

287
    getPlaceholder(): string {
288
        return this.isRange && this.placeholder && Array.isArray(this.placeholder)
289
            ? (this.placeholder as string[]).join(this.separator)
290
            : (this.placeholder as string);
291
    }
292

293
    private updateReadableDate(setValue: TinyDate | TinyDate[] | null) {
294
        const readableValue = this.getReadableValue(setValue);
295
        if (readableValue === this.pickerInput.nativeElement['value']) {
296
            return;
297
        }
298

299
        this.pickerInput.nativeElement.value = readableValue;
300
    }
301
}
STATUS · Troubleshooting · Open an Issue · Sales · Support · CAREERS · ENTERPRISE · START FREE · SCHEDULE DEMO
ANNOUNCEMENTS · TWITTER · TOS & SLA · Supported CI Services · What's a CI service? · Automated Testing

© 2026 Coveralls, Inc