d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { fromUnixTime, getMonth, getYear } from 'date-fns';
import { DateRangeItemInfo, ThyDateRangeComponent } from 'ngx-tethys/date-range';
import { endOfMonth, FunctionProp, getUnixTime, startOfMonth, TinyDate } from 'ngx-tethys/util';

import { ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, OnInit, Output, TemplateRef } from '@angular/core';
import { ThyButtonComponent } from 'ngx-tethys/button';
import { NgIf, NgTemplateOutlet, JsonPipe } from '@angular/common';
import { FormsModule } from '@angular/forms';

/**
 * 日历头部操作栏组件
 * @name thy-calendar-header
 * @order 20
 */
@Component({
    selector: 'thy-calendar-header',
    templateUrl: './calendar-header.component.html',
    standalone: true,
    imports: [ThyDateRangeComponent, FormsModule, NgIf, ThyButtonComponent, NgTemplateOutlet, JsonPipe]
})
export class ThyCalendarHeaderComponent implements OnInit {
    @HostBinding('class.thy-calendar-full-header-container') className = true;

    /**
     * 当前选中日期
     */
    @Input()
    set currentDate(value: TinyDate) {
        this.setDate(value);
    }

    /**
     *         自定义渲染右侧操作项
     */
    @Input() operationRender: FunctionProp<TemplateRef<any>>;

    /**
     * 日期选择范围（年）发生变化的回调
     */
    @Output() readonly yearChange: EventEmitter<number> = new EventEmitter();

    /**
     * 日期选择范围（月）发生变化的回调
     */
    @Output() readonly monthChange: EventEmitter<number> = new EventEmitter();

    /**
     * 日期选择范围（日期）发生变化的回调
     */
    @Output() readonly dateRangeChange: EventEmitter<DateRangeItemInfo> = new EventEmitter();

    public pickerFormat = 'yyyy年MM月';

    public dateRanges: DateRangeItemInfo[] = [
        {
            key: 'month',
            text: new TinyDate().format(this.pickerFormat),
            begin: getUnixTime(startOfMonth(new Date())),
            end: getUnixTime(endOfMonth(new Date())),
            timestamp: {
                interval: 1,
                unit: 'month'
            }
        }
    ];

    public date: DateRangeItemInfo;

    private _currentDate: TinyDate;

    public isCurrent: boolean;

    constructor(private cdr: ChangeDetectorRef) {}

    ngOnInit(): void {}

    onChangeMonth(month: DateRangeItemInfo) {
        const currentMonth = fromUnixTime(month.begin).getMonth();
        this.monthChange.emit(currentMonth);
    }

    onChangeYear(year: DateRangeItemInfo) {
        const currentYear = fromUnixTime(year.begin).getFullYear();
        this.yearChange.emit(currentYear);
    }

    onChangeRange(dateRange: DateRangeItemInfo) {
        this.isCurrentDate(this._currentDate);
        this.onChangeYear(dateRange);
        this.onChangeMonth(dateRange);
        this.dateRangeChange.emit(dateRange);
    }

    backToday() {
        this._currentDate = new TinyDate();
        this.date = { ...this.dateRanges[0] };
        this.onChangeRange(this.date);
        this.cdr.detectChanges();
    }

    setDate(value: TinyDate) {
        this.isCurrentDate(value);
        if (this.isCurrent) {
            this._currentDate = value;
            const dateRange = {
                ...this.dateRanges[0],
                key: 'exception',
                text: this._currentDate.format(this.pickerFormat),
                begin: getUnixTime(startOfMonth(this._currentDate.nativeDate)),
                end: getUnixTime(endOfMonth(this._currentDate.nativeDate))
            };
            this.date = dateRange;
        } else {
            this._currentDate = new TinyDate();
            this.date = { ...this.dateRanges[0] };
        }
    }

    isCurrentDate(currentDate: TinyDate) {
        this.isCurrent = currentDate.getMonth() !== getMonth(new Date()) || currentDate.getYear() !== getYear(new Date());
    }
}

1	import { fromUnixTime, getMonth, getYear } from 'date-fns';
2	import { DateRangeItemInfo, ThyDateRangeComponent } from 'ngx-tethys/date-range';
3	import { endOfMonth, FunctionProp, getUnixTime, startOfMonth, TinyDate } from 'ngx-tethys/util';
4
5	import { ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, OnInit, Output, TemplateRef } from '@angular/core';
6	import { ThyButtonComponent } from 'ngx-tethys/button';
7	import { NgIf, NgTemplateOutlet, JsonPipe } from '@angular/common';
8	import { FormsModule } from '@angular/forms';
9
10	/**
11	* 日历头部操作栏组件
12	* @name thy-calendar-header
13	* @order 20
14	*/
15	@Component({	1✔
16	selector: 'thy-calendar-header',
17	templateUrl: './calendar-header.component.html',	×
18	standalone: true,
19	imports: [ThyDateRangeComponent, FormsModule, NgIf, ThyButtonComponent, NgTemplateOutlet, JsonPipe]
20	})	×
21	export class ThyCalendarHeaderComponent implements OnInit {	×
22	@HostBinding('class.thy-calendar-full-header-container') className = true;	×
23		×
24	/**	×
25	* 当前选中日期	×
26	*/	×
27	@Input()
28	set currentDate(value: TinyDate) {
29	this.setDate(value);
30	}
31
32	/**
33	* 自定义渲染右侧操作项
34	*/
35	@Input() operationRender: FunctionProp<TemplateRef<any>>;
36
37	/**
38	* 日期选择范围（年）发生变化的回调
39	*/
40	@Output() readonly yearChange: EventEmitter<number> = new EventEmitter();
41		×
42	/**	×
43	* 日期选择范围（月）发生变化的回调
44	*/
45	@Output() readonly monthChange: EventEmitter<number> = new EventEmitter();	×
46		×
47	/**
48	* 日期选择范围（日期）发生变化的回调
49	*/	×
50	@Output() readonly dateRangeChange: EventEmitter<DateRangeItemInfo> = new EventEmitter();	×
51		×
52	public pickerFormat = 'yyyy年MM月';	×
53
54	public dateRanges: DateRangeItemInfo[] = [
55	{	×
56	key: 'month',	×
57	text: new TinyDate().format(this.pickerFormat),	×
58	begin: getUnixTime(startOfMonth(new Date())),	×
59	end: getUnixTime(endOfMonth(new Date())),
60	timestamp: {
61	interval: 1,	×
62	unit: 'month'	×
63	}	×
64	}	×
65	];
66
67	public date: DateRangeItemInfo;
68
69	private _currentDate: TinyDate;
70
71	public isCurrent: boolean;	×
72
73	constructor(private cdr: ChangeDetectorRef) {}
74		×
75	ngOnInit(): void {}	×
76
77	onChangeMonth(month: DateRangeItemInfo) {
78	const currentMonth = fromUnixTime(month.begin).getMonth();
79	this.monthChange.emit(currentMonth);	×
80	}
81		1✔
82	onChangeYear(year: DateRangeItemInfo) {
83	const currentYear = fromUnixTime(year.begin).getFullYear();
84	this.yearChange.emit(currentYear);	1✔
85	}
86
87	onChangeRange(dateRange: DateRangeItemInfo) {
88	this.isCurrentDate(this._currentDate);
89	this.onChangeYear(dateRange);
90	this.onChangeMonth(dateRange);
91	this.dateRangeChange.emit(dateRange);
92	}
93		1✔
94	backToday() {
95	this._currentDate = new TinyDate();
96	this.date = { ...this.dateRanges[0] };
97	this.onChangeRange(this.date);
98	this.cdr.detectChanges();
99	}
100
101	setDate(value: TinyDate) {
102	this.isCurrentDate(value);
103	if (this.isCurrent) {
104	this._currentDate = value;
105	const dateRange = {
106	...this.dateRanges[0],
107	key: 'exception',
108	text: this._currentDate.format(this.pickerFormat),
109	begin: getUnixTime(startOfMonth(this._currentDate.nativeDate)),
110	end: getUnixTime(endOfMonth(this._currentDate.nativeDate))
111	};
112	this.date = dateRange;
113	} else {
114	this._currentDate = new TinyDate();
115	this.date = { ...this.dateRanges[0] };
116	}
117	}
118
119	isCurrentDate(currentDate: TinyDate) {
120	this.isCurrent = currentDate.getMonth() !== getMonth(new Date()) \|\| currentDate.getYear() !== getYear(new Date());
121	}
122	}

atinc / ngx-tethys / d9ae709b-3c27-4b69-b125-b8b80b54f90b

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