import { InputBoolean } from 'ngx-tethys/core' ; 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' ; export type CalendarMode = 'month' | 'year' ; type CalendarDateTemplate = TemplateRef < { $implicit : Date ; } > ; @ Component ( { selector : 'thy-calendar' , templateUrl : './calendar.component.html' , encapsulation : ViewEncapsulation . None , changeDetection : ChangeDetectionStrategy . OnPush , providers : [ { provide : NG_VALUE_ACCESSOR , useExisting : forwardRef ( ( ) => ThyCalendarComponent ) , multi : true } ] } ) export class ThyCalendarComponent implements OnInit , OnChanges { @ HostBinding ( 'class.thy-calendar-container' ) className = true ; @ HostBinding ( 'class.thy-calendar-full' ) className1 = true ; @ Input ( ) thyMode : CalendarMode = 'month' ; @ Input ( ) thyValue ? : Date ; @ Input ( ) thyDisabledDate ? : ( date : Date ) => boolean ; @ Output ( ) thyModeChange : EventEmitter < CalendarMode > = new EventEmitter ( ) ; @ Output ( ) thyPanelChange : EventEmitter < { date : Date ; mode : CalendarMode ; } > = new EventEmitter ( ) ; @ 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 ) ! ; } @ Input ( ) @ InputBoolean ( ) thyFullscreen = true ; public currentDate = new TinyDate ( ) ; public prefixCls = 'thy-calendar-full' ; private onChangeFn : ( date : Date ) => void = ( ) => { } ; private onTouchFn : ( ) => void = ( ) => { } ; constructor ( private cdr ) { } ngOnInit ( ) { } onYearSelect ( year ) { const date = this . currentDate . setYear ( year ) ; this . updateDate ( date ) ; } onMonthSelect ( month ) { const date = this . currentDate . setMonth ( month ) ; this . updateDate ( date ) ; } onDateSelect ( date ) { this . updateDate ( date ) ; } onDateRangeSelect ( date ) { this . thyDateRangeChange . emit ( date ) ; } writeValue ( value ) { this . updateDate ( new TinyDate ( value as Date ) , false ) ; this . cdr . markForCheck ( ) ; } registerOnChange ( fn ) { this . onChangeFn = fn ; } registerOnTouched ( fn ) { this . onTouchFn = fn ; } private updateDate ( date , touched = true ) { this . currentDate = date ; if ( touched ) { this . onChangeFn ( date . nativeDate ) ; this . onTouchFn ( ) ; this . thySelectChange . emit ( date . nativeDate ) ; this . thyValueChange . emit ( date . nativeDate ) ; } } ngOnChanges ( changes ) { if ( changes . thyValue ) { this . updateDate ( new TinyDate ( this . thyValue ) , false ) ; } } }