772d086c-2b84-41d9-a1da-d9c1f65d7d9c

Committed 11 Apr 2025 08:16AM UTC coverage: 90.209% (-0.03%) from 90.236%

Build # 772d086c-2b84-41d9-a1da-d9c1f65d7d9c

Build Type

Pull #3335

circleci

Committed by

wangyuan-ky

Commit Message

fix: error

Pull Request Pull Request #3335: feat(date-picker): add timezone support to date picker components and utilities #TINFR-1734

Run Details

5606 of 6877 branches covered (81.52%)

Branch coverage included in aggregate %.

39 of 41 new or added lines in 11 files covered. (95.12%)

48 existing lines in 8 files now uncovered.

13364 of 14152 relevant lines covered (94.43%)

992.11 hits per line

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

93.2

/src/date-picker/lib/date/date-table.component.ts

import { NgClass } from '@angular/common';
import { ChangeDetectionStrategy, Component, EventEmitter, OnChanges, Output, inject } from '@angular/core';
import { TinyDate, valueFunctionProp } from 'ngx-tethys/util';
import { DateHelperService } from '../../date-helper.service';
import { ThyDatePickerConfigService } from '../../date-picker.service';
import { CalendarTable } from '../calendar/calendar-table.component';
import { DateTableCell } from './date-table-cell.component';
import { DateBodyRow, DateCell } from './types';

/**
 * @private
 */
@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    // eslint-disable-next-line @angular-eslint/component-selector
    selector: 'date-table',
    exportAs: 'dateTable',
    templateUrl: 'date-table.component.html',
    imports: [NgClass, DateTableCell]
})
export class DateTable extends CalendarTable implements OnChanges {
    private dateHelper = inject(DateHelperService);
    private datePickerConfigService = inject(ThyDatePickerConfigService);

    @Output() readonly dayHover = new EventEmitter<TinyDate>(); // Emitted when hover on a day by mouse enter

    constructor() {
        super();
    }

    private chooseDate(value: TinyDate): void {
        // Only change date not change time
        const date = new TinyDate(
            TinyDate.createDateInTimeZone(
                value.getFullYear(),
                value.getMonth(),
                value.getDate(),
                this.activeDate?.getHours(),
                this.activeDate?.getMinutes(),
                this.activeDate?.getSeconds(),
                this.timeZone
            ),
            this.timeZone
        );
        this.activeDate = date.clone();
        this.valueChange.emit(date);
    }

    makeHeadRow(): DateCell[] {
        const weekDays: DateCell[] = [];
        const start = this.activeDate.calendarStart({ weekStartsOn: this.datePickerConfigService.config.weekStartsOn });
        for (let colIndex = 0; colIndex < this.MAX_COL; colIndex++) {
            const day = start.addDays(colIndex);
            weekDays[colIndex] = {
                title: this.dateHelper.format(day.nativeDate, this.dateHelper.relyOnDatePipe ? 'E' : 'ddd'),
                content: this.dateHelper.format(day.nativeDate, this.getVeryShortWeekFormat()),
                isSelected: false,
                isDisabled: false,
                onClick(): void {},
                onMouseEnter(): void {}
            };
        }
        return weekDays;
    }

    private getVeryShortWeekFormat(): string {
        if (this.dateHelper.relyOnDatePipe) {
            return this.prefixCls === 'thy-calendar-full' ? this.locale().fullWeekFormat : this.locale().weekFormat;
        }
        return 'dd';
    }

    makeBodyRows(): DateBodyRow[] {
        const dateRows: DateBodyRow[] = [];
        const firstDayOfMonth = this.activeDate.calendarStart({ weekStartsOn: this.datePickerConfigService.config.weekStartsOn });
        for (let week = 0; week < this.MAX_ROW; week++) {
            const weekStart = firstDayOfMonth.addDays(week * 7);
            const row: DateBodyRow = {
                isActive: false,
                isCurrent: false,
                dateCells: [],
                year: weekStart.getYear()
            };

            for (let day = 0; day < 7; day++) {
                const date = weekStart.addDays(day);
                const dateFormat = this.dateHelper.relyOnDatePipe ? 'longDate' : 'YYYY-MM-DD';
                const title = this.dateHelper.format(date.nativeDate, dateFormat);
                const label = this.dateHelper.format(date.nativeDate, this.dateHelper.relyOnDatePipe ? 'dd' : 'DD');

                const cell: DateCell = {
                    value: date.nativeDate,
                    label: label,
                    isSelected: false,
                    isDisabled: false,
                    isToday: false,
                    title: title,
                    dateCellRender: valueFunctionProp(this.cellRender, date),
                    content: `${date.getDate()}`,
                    onClick: () => this.chooseDate(date),
                    onMouseEnter: () => this.dayHover.emit(date)
                };
                this.addCellProperty(cell, date);

                if (this.showWeek && !row.weekNum) {
                    row.weekNum = this.dateHelper.getISOWeek(date.nativeDate);
                }

                if (date.isToday()) {
                    cell.isToday = true;
                    row.isCurrent = true;
                }

                if (this.selectedValue?.length > 0) {
                    const [startSelected, endSelected] = this.selectedValue;
                    if (date.isSameDay(startSelected)) {
                        row.isActive = true;
                    }
                    if (date.isSameDay(endSelected)) {
                        row.isActive = true;
                    }
                } else if (date.isSameDay(this.value)) {
                    row.isActive = true;
                }

                row.dateCells.push(cell);
            }

            row.classMap = {
                [`${this.prefixCls}-current-week`]: row.isCurrent,
                [`${this.prefixCls}-active-week`]: row.isActive
            };

            dateRows.push(row);
        }

        return dateRows;
    }

    addCellProperty(cell: DateCell, date: TinyDate): void {
        if (this.selectedValue?.length > 0) {
            const [startSelected, endSelected] = this.selectedValue;
            if (startSelected?.isSameDay(date)) {
                cell.isSelected = true;
            }
            if (endSelected?.isSameDay(date)) {
                cell.isSelected = true;
            }
            cell.isStartSingle = startSelected && !endSelected;
            cell.isEndSingle = !startSelected && !!endSelected;
            cell.isInRange = startSelected?.isBeforeDay(date) && date.isBeforeDay(endSelected);
        } else {
            cell.isSelected = date.isSameDay(this.value);
        }
        cell.isLastMonthCell = date.isBeforeMonth(this.activeDate);
        cell.isNextMonthCell = date.isAfterMonth(this.activeDate);
        cell.isToday = date.isToday();
        cell.isDisabled = !!this.disabledDate?.(date.nativeDate);
        cell.classMap = this.getClassMap(cell);
    }

    getClassMap(cell: DateCell): { [key: string]: boolean } {
        return {
            [`${this.prefixCls}-cell`]: true,
            [`${this.prefixCls}-today`]: cell.isToday,
            [`${this.prefixCls}-last-month-cell`]: cell.isLastMonthCell,
            [`${this.prefixCls}-next-month-btn-day`]: cell.isNextMonthCell,
            [`${this.prefixCls}-selected-day`]: cell.isSelected,
            [`${this.prefixCls}-disabled-cell`]: cell.isDisabled,
            [`${this.prefixCls}-selected-start-date`]: !!cell.isSelectedStartDate,
            [`${this.prefixCls}-selected-end-date`]: !!cell.isSelectedEndDate,
            [`${this.prefixCls}-in-range-cell`]: !!cell.isInRange
        };
    }
}

1	import { NgClass } from '@angular/common';
2	import { ChangeDetectionStrategy, Component, EventEmitter, OnChanges, Output, inject } from '@angular/core';
3	import { TinyDate, valueFunctionProp } from 'ngx-tethys/util';
4	import { DateHelperService } from '../../date-helper.service';
5	import { ThyDatePickerConfigService } from '../../date-picker.service';
6	import { CalendarTable } from '../calendar/calendar-table.component';
7	import { DateTableCell } from './date-table-cell.component';
8	import { DateBodyRow, DateCell } from './types';
9
10	/**
11	* @private
12	*/
13	@Component({	1✔
14	changeDetection: ChangeDetectionStrategy.OnPush,
15	// eslint-disable-next-line @angular-eslint/component-selector	190✔
16	selector: 'date-table',	190✔
17	exportAs: 'dateTable',	190✔
18	templateUrl: 'date-table.component.html',	190✔
19	imports: [NgClass, DateTableCell]
20	})
21	export class DateTable extends CalendarTable implements OnChanges {
22	private dateHelper = inject(DateHelperService);	30✔
23	private datePickerConfigService = inject(ThyDatePickerConfigService);	30✔
24		30✔
25	@Output() readonly dayHover = new EventEmitter<TinyDate>(); // Emitted when hover on a day by mouse enter
26
27	constructor() {	527✔
28	super();	527✔
29	}	527✔
30		3,689✔
31	private chooseDate(value: TinyDate): void {	3,689✔
32	// Only change date not change time	3,689!
33	const date = new TinyDate(
34	TinyDate.createDateInTimeZone(
35	value.getFullYear(),
36	value.getMonth(),
37	value.getDate(),
38	this.activeDate?.getHours(),
39	this.activeDate?.getMinutes(),
40	this.activeDate?.getSeconds(),	527✔
41	this.timeZone
42	),
43	this.timeZone	3,689!
44	);	3,689✔
45	this.activeDate = date.clone();
UNCOV 46	this.valueChange.emit(date);	×
47	}
48
49	makeHeadRow(): DateCell[] {	527✔
50	const weekDays: DateCell[] = [];	527✔
51	const start = this.activeDate.calendarStart({ weekStartsOn: this.datePickerConfigService.config.weekStartsOn });	527✔
52	for (let colIndex = 0; colIndex < this.MAX_COL; colIndex++) {	3,162✔
53	const day = start.addDays(colIndex);	3,162✔
54	weekDays[colIndex] = {
55	title: this.dateHelper.format(day.nativeDate, this.dateHelper.relyOnDatePipe ? 'E' : 'ddd'),
56	content: this.dateHelper.format(day.nativeDate, this.getVeryShortWeekFormat()),
57	isSelected: false,
58	isDisabled: false,
59	onClick(): void {},	3,162✔
60	onMouseEnter(): void {}	22,134✔
61	};	22,134!
62	}	22,134✔
63	return weekDays;	22,134!
64	}	22,134✔
65
66	private getVeryShortWeekFormat(): string {
67	if (this.dateHelper.relyOnDatePipe) {
68	return this.prefixCls === 'thy-calendar-full' ? this.locale().fullWeekFormat : this.locale().weekFormat;
69	}
70	return 'dd';
71	}
72
73	makeBodyRows(): DateBodyRow[] {	30✔
UNCOV 74	const dateRows: DateBodyRow[] = [];	×
75	const firstDayOfMonth = this.activeDate.calendarStart({ weekStartsOn: this.datePickerConfigService.config.weekStartsOn });
76	for (let week = 0; week < this.MAX_ROW; week++) {	22,134✔
77	const weekStart = firstDayOfMonth.addDays(week * 7);	22,134✔
78	const row: DateBodyRow = {	96✔
79	isActive: false,
80	isCurrent: false,	22,134✔
81	dateCells: [],	290✔
82	year: weekStart.getYear()	290✔
83	};
84		22,134✔
85	for (let day = 0; day < 7; day++) {	4,074✔
86	const date = weekStart.addDays(day);	4,074✔
87	const dateFormat = this.dateHelper.relyOnDatePipe ? 'longDate' : 'YYYY-MM-DD';	54✔
88	const title = this.dateHelper.format(date.nativeDate, dateFormat);
89	const label = this.dateHelper.format(date.nativeDate, this.dateHelper.relyOnDatePipe ? 'dd' : 'DD');	4,074✔
90		35✔
91	const cell: DateCell = {
92	value: date.nativeDate,
93	label: label,	18,060✔
94	isSelected: false,	126✔
95	isDisabled: false,
96	isToday: false,	22,134✔
97	title: title,
98	dateCellRender: valueFunctionProp(this.cellRender, date),	3,162✔
99	content: `${date.getDate()}`,
100	onClick: () => this.chooseDate(date),
101	onMouseEnter: () => this.dayHover.emit(date)
102	};	3,162✔
103	this.addCellProperty(cell, date);
104		527✔
105	if (this.showWeek && !row.weekNum) {
106	row.weekNum = this.dateHelper.getISOWeek(date.nativeDate);
107	}	22,134✔
108		4,074✔
109	if (date.isToday()) {	4,074✔
110	cell.isToday = true;	54✔
111	row.isCurrent = true;
112	}	4,074✔
113		35✔
114	if (this.selectedValue?.length > 0) {
115	const [startSelected, endSelected] = this.selectedValue;	4,074✔
116	if (date.isSameDay(startSelected)) {	4,074!
117	row.isActive = true;	4,074✔
118	}
119	if (date.isSameDay(endSelected)) {
120	row.isActive = true;	18,060✔
121	}
122	} else if (date.isSameDay(this.value)) {	22,134✔
123	row.isActive = true;	22,134✔
124	}	22,134✔
125		22,134✔
126	row.dateCells.push(cell);	22,134✔
127	}
128
129	row.classMap = {	22,134✔
130	[`${this.prefixCls}-current-week`]: row.isCurrent,
131	[`${this.prefixCls}-active-week`]: row.isActive
132	};
133
134	dateRows.push(row);
135	}
136
137	return dateRows;
138	}
139
140	addCellProperty(cell: DateCell, date: TinyDate): void {
141	if (this.selectedValue?.length > 0) {	1✔
142	const [startSelected, endSelected] = this.selectedValue;	1✔
143	if (startSelected?.isSameDay(date)) {
144	cell.isSelected = true;
145	}
146	if (endSelected?.isSameDay(date)) {	1✔
147	cell.isSelected = true;
148	}
149	cell.isStartSingle = startSelected && !endSelected;
150	cell.isEndSingle = !startSelected && !!endSelected;
151	cell.isInRange = startSelected?.isBeforeDay(date) && date.isBeforeDay(endSelected);
152	} else {
153	cell.isSelected = date.isSameDay(this.value);
154	}
155	cell.isLastMonthCell = date.isBeforeMonth(this.activeDate);
156	cell.isNextMonthCell = date.isAfterMonth(this.activeDate);
157	cell.isToday = date.isToday();
158	cell.isDisabled = !!this.disabledDate?.(date.nativeDate);
159	cell.classMap = this.getClassMap(cell);
160	}
161
162	getClassMap(cell: DateCell): { [key: string]: boolean } {
163	return {
164	[`${this.prefixCls}-cell`]: true,
165	[`${this.prefixCls}-today`]: cell.isToday,
166	[`${this.prefixCls}-last-month-cell`]: cell.isLastMonthCell,
167	[`${this.prefixCls}-next-month-btn-day`]: cell.isNextMonthCell,
168	[`${this.prefixCls}-selected-day`]: cell.isSelected,
169	[`${this.prefixCls}-disabled-cell`]: cell.isDisabled,
170	[`${this.prefixCls}-selected-start-date`]: !!cell.isSelectedStartDate,
171	[`${this.prefixCls}-selected-end-date`]: !!cell.isSelectedEndDate,
172	[`${this.prefixCls}-in-range-cell`]: !!cell.isInRange
173	};
174	}
175	}

atinc / ngx-tethys / 772d086c-2b84-41d9-a1da-d9c1f65d7d9c

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

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