d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { DateRangeItemInfo } from 'ngx-tethys/date-range';
import { TinyDate } from 'ngx-tethys/util';

import {
    ChangeDetectionStrategy,
    ChangeDetectorRef,
    Component,
    ContentChild,
    EventEmitter,
    forwardRef,
    HostBinding,
    Input,
    OnChanges,
    OnInit,
    Output,
    SimpleChanges,
    TemplateRef,
    ViewEncapsulation
} from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';

import { ThyCalendarHeaderOperationDirective as HeaderOperation, ThyDateCellDirective as DateCell } from './calendar-cells';
import { DateTableComponent, MonthTableComponent } from 'ngx-tethys/date-picker';
import { NgIf } from '@angular/common';
import { ThyCalendarHeaderComponent } from './calendar-header.component';

export type CalendarMode = 'month' | 'year';
type CalendarDateTemplate = TemplateRef<{ $implicit: Date }>;

/**
 * 日历组件
 * @name thy-calendar
 * @order 10
 */
@Component({
    selector: 'thy-calendar',
    templateUrl: './calendar.component.html',
    encapsulation: ViewEncapsulation.None,
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ThyCalendarComponent), multi: true }],
    standalone: true,
    imports: [ThyCalendarHeaderComponent, NgIf, DateTableComponent, MonthTableComponent]
})
export class ThyCalendarComponent implements OnInit, OnChanges {
    @HostBinding('class.thy-calendar-container') className = true;

    @HostBinding('class.thy-calendar-full') className1 = true;

    /**
     * 展示模式
     * @type month | year
     */
    @Input() thyMode: CalendarMode = 'month';

    /**
     * （可双向绑定）展示日期，默认为当前日期
     */
    @Input() thyValue?: Date;

    /**
     * 不可选择的日期
     */
    @Input() thyDisabledDate?: (date: Date) => boolean;

    /**
     * 日期选择变化的回调
     */
    @Output() thySelectChange: EventEmitter<Date> = new EventEmitter();

    /**
     * 日期选择变化的回调
     */
    @Output() thyValueChange: EventEmitter<Date> = new EventEmitter();

    /**
     * 日期选择范围变化的回调
     */
    @Output() thyDateRangeChange: EventEmitter<DateRangeItemInfo> = new EventEmitter();

    /**
     * （可作为内容）自定义渲染日期单元格，模板内容会被追加到单元格
     */
    @Input() thyDateCell?: CalendarDateTemplate;

    /**
     *  追加到单元格的自定义模板
     */
    @ContentChild(DateCell, { read: TemplateRef }) thyDateCellChild?: CalendarDateTemplate;
    get dateCell(): CalendarDateTemplate {
        return (this.thyDateCell || this.thyDateCellChild)!;
    }

    /**
     * （可作为内容）自定义渲染右上角操作项
     */
    @Input() thyCalendarHeaderOperation?: CalendarDateTemplate;

    /**
     * 右上角操作项的自定义模板
     */
    @ContentChild(HeaderOperation, { read: TemplateRef }) thyCalendarHeaderOperationChild?: CalendarDateTemplate;
    get headerOperation(): CalendarDateTemplate {
        return (this.thyCalendarHeaderOperation || this.thyCalendarHeaderOperationChild)!;
    }

    public currentDate = new TinyDate();

    public prefixCls = 'thy-calendar-full';

    private onChangeFn: (date: Date) => void = () => {};

    private onTouchFn: () => void = () => {};

    constructor(private cdr: ChangeDetectorRef) {}

    ngOnInit(): void {}

    onYearSelect(year: number): void {
        const date = this.currentDate.setYear(year);
        this.updateDate(date);
    }

    onMonthSelect(month: number): void {
        const date = this.currentDate.setMonth(month);
        this.updateDate(date);
    }

    onDateSelect(date: TinyDate): void {
        // Only currentDate is enough in calendar
        // this.value = date;
        this.updateDate(date);
    }

    onDateRangeSelect(date: DateRangeItemInfo) {
        this.thyDateRangeChange.emit(date);
    }

    writeValue(value: Date | null): void {
        this.updateDate(new TinyDate(value as Date), false);
        this.cdr.markForCheck();
    }

    registerOnChange(fn: (date: Date) => void): void {
        this.onChangeFn = fn;
    }

    registerOnTouched(fn: () => void): void {
        this.onTouchFn = fn;
    }

    private updateDate(date: TinyDate, touched: boolean = true): void {
        this.currentDate = date;

        if (touched) {
            this.onChangeFn(date.nativeDate);
            this.onTouchFn();
            this.thySelectChange.emit(date.nativeDate);
            this.thyValueChange.emit(date.nativeDate);
        }
    }

    ngOnChanges(changes: SimpleChanges): void {
        if (changes.thyValue) {
            this.updateDate(new TinyDate(this.thyValue), false);
        }
    }
}

1	import { DateRangeItemInfo } from 'ngx-tethys/date-range';
2	import { TinyDate } from 'ngx-tethys/util';
3
4	import {
5	ChangeDetectionStrategy,
6	ChangeDetectorRef,
7	Component,
8	ContentChild,
9	EventEmitter,
10	forwardRef,
11	HostBinding,
12	Input,
13	OnChanges,
14	OnInit,
15	Output,
16	SimpleChanges,	1✔
17	TemplateRef,
18	ViewEncapsulation	×
19	} from '@angular/core';
20	import { NG_VALUE_ACCESSOR } from '@angular/forms';
21		×
22	import { ThyCalendarHeaderOperationDirective as HeaderOperation, ThyDateCellDirective as DateCell } from './calendar-cells';
23	import { DateTableComponent, MonthTableComponent } from 'ngx-tethys/date-picker';
24	import { NgIf } from '@angular/common';	×
25	import { ThyCalendarHeaderComponent } from './calendar-header.component';	×
26		×
27	export type CalendarMode = 'month' \| 'year';	×
28	type CalendarDateTemplate = TemplateRef<{ $implicit: Date }>;	×
29		×
30	/**	×
31	* 日历组件	×
32	* @name thy-calendar	×
33	* @order 10	×
34	*/	×
35	@Component({
36	selector: 'thy-calendar',
37	templateUrl: './calendar.component.html',
38	encapsulation: ViewEncapsulation.None,	×
39	changeDetection: ChangeDetectionStrategy.OnPush,	×
40	providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ThyCalendarComponent), multi: true }],
41	standalone: true,
42	imports: [ThyCalendarHeaderComponent, NgIf, DateTableComponent, MonthTableComponent]	×
43	})	×
44	export class ThyCalendarComponent implements OnInit, OnChanges {
45	@HostBinding('class.thy-calendar-container') className = true;
46
47	@HostBinding('class.thy-calendar-full') className1 = true;
48		×
49	/**
50	* 展示模式
51	* @type month \| year	×
52	*/
53	@Input() thyMode: CalendarMode = 'month';
54		×
55	/**	×
56	* （可双向绑定）展示日期，默认为当前日期
57	*/
58	@Input() thyValue?: Date;	×
59
60	/**
61	* 不可选择的日期	×
62	*/
63	@Input() thyDisabledDate?: (date: Date) => boolean;	×
64		×
65	/**	×
66	* 日期选择变化的回调	×
67	*/	×
68	@Output() thySelectChange: EventEmitter<Date> = new EventEmitter();	×
69		×
70	/**
71	* 日期选择变化的回调
72	*/
73	@Output() thyValueChange: EventEmitter<Date> = new EventEmitter();	×
74		×
75	/**
76	* 日期选择范围变化的回调
77	*/	1✔
78	@Output() thyDateRangeChange: EventEmitter<DateRangeItemInfo> = new EventEmitter();
79
80	/**	1✔
81	* （可作为内容）自定义渲染日期单元格，模板内容会被追加到单元格
82	*/
83	@Input() thyDateCell?: CalendarDateTemplate;
84
85	/**
86	* 追加到单元格的自定义模板
87	*/
88	@ContentChild(DateCell, { read: TemplateRef }) thyDateCellChild?: CalendarDateTemplate;
89	get dateCell(): CalendarDateTemplate {
90	return (this.thyDateCell \|\| this.thyDateCellChild)!;
91	}
92
93	/**
94	* （可作为内容）自定义渲染右上角操作项
95	*/	1✔
96	@Input() thyCalendarHeaderOperation?: CalendarDateTemplate;
97
98	/**
99	* 右上角操作项的自定义模板
100	*/
101	@ContentChild(HeaderOperation, { read: TemplateRef }) thyCalendarHeaderOperationChild?: CalendarDateTemplate;	×
102	get headerOperation(): CalendarDateTemplate {
103	return (this.thyCalendarHeaderOperation \|\| this.thyCalendarHeaderOperationChild)!;
104	}
105
106	public currentDate = new TinyDate();
107
108	public prefixCls = 'thy-calendar-full';
109
110	private onChangeFn: (date: Date) => void = () => {};
111
112	private onTouchFn: () => void = () => {};
113
114	constructor(private cdr: ChangeDetectorRef) {}
115
116	ngOnInit(): void {}
117
118	onYearSelect(year: number): void {
119	const date = this.currentDate.setYear(year);
120	this.updateDate(date);
121	}
122
123	onMonthSelect(month: number): void {
124	const date = this.currentDate.setMonth(month);
125	this.updateDate(date);
126	}
127
128	onDateSelect(date: TinyDate): void {
129	// Only currentDate is enough in calendar
130	// this.value = date;
131	this.updateDate(date);
132	}
133
134	onDateRangeSelect(date: DateRangeItemInfo) {
135	this.thyDateRangeChange.emit(date);
136	}
137
138	writeValue(value: Date \| null): void {
139	this.updateDate(new TinyDate(value as Date), false);
140	this.cdr.markForCheck();
141	}
142
143	registerOnChange(fn: (date: Date) => void): void {
144	this.onChangeFn = fn;
145	}
146
147	registerOnTouched(fn: () => void): void {
148	this.onTouchFn = fn;
149	}
150
151	private updateDate(date: TinyDate, touched: boolean = true): void {
152	this.currentDate = date;
153
154	if (touched) {
155	this.onChangeFn(date.nativeDate);
156	this.onTouchFn();
157	this.thySelectChange.emit(date.nativeDate);
158	this.thyValueChange.emit(date.nativeDate);
159	}
160	}
161
162	ngOnChanges(changes: SimpleChanges): void {
163	if (changes.thyValue) {
164	this.updateDate(new TinyDate(this.thyValue), false);
165	}
166	}
167	}

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