import { fromUnixTime , getMonth , getYear } from 'date-fns' ; import { DateRangeItemInfo } 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' ; @ Component ( { selector : 'thy-calendar-header' , templateUrl : './calendar-header.component.html' } ) export class ThyCalendarHeaderComponent implements OnInit { @ HostBinding ( 'class.thy-calendar-full-header-container' ) className = true ; @ Input ( ) set currentDate ( value ) { 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 dateRanges : DateRangeItemInfo [ ] = [ { key : 'month' , text : getYear ( new Date ( ) ) + '年' + ( getMonth ( new Date ( ) ) + 1 ) + '月' , 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 ) { } ngOnInit ( ) { } onChangeMonth ( month ) { const currentMonth = fromUnixTime ( month . begin ) . getMonth ( ) ; this . monthChange . emit ( currentMonth ) ; } onChangeYear ( year ) { const currentYear = fromUnixTime ( year . begin ) . getFullYear ( ) ; this . yearChange . emit ( currentYear ) ; } onChangeRange ( dateRange ) { 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 ) { this . isCurrentDate ( value ) ; if ( this . isCurrent ) { this . _currentDate = value ; const dateRange = { ... this . dateRanges [ 0 ] , key : 'exception' , text : getYear ( this . _currentDate . nativeDate ) + '年' + ( getMonth ( this . _currentDate . nativeDate ) + 1 ) + '月' , 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 ) { this . isCurrent = currentDate . getMonth ( ) !== getMonth ( new Date ( ) ) || currentDate . getYear ( ) !== getYear ( new Date ( ) ) ; } }