import { ChangeDetectionStrategy , Component , OnChanges } from '@angular/core' ; import { TinyDate } from 'ngx-tethys/util' ; import { DateHelperService } from '../../date-helper.service' ; import { CalendarTable } from '../calendar/calendar-table.component' ; import { DateCell , DateBodyRow } from '../date/types' ; @ Component ( { changeDetection : ChangeDetectionStrategy . OnPush , selector : 'month-table' , exportAs : 'monthTable' , templateUrl : 'month-table.component.html' } ) export class MonthTableComponent extends CalendarTable implements OnChanges { MAX_ROW = 4 ; MAX_COL = 3 ; constructor ( private dateHelper ) { super ( ) ; } private chooseMonth ( month ) { this . value = this . activeDate . setMonth ( month ) ; this . valueChange . emit ( this . value ) ; this . render ( ) ; } makeHeadRow ( ) { return [ ] ; } makeBodyRows ( ) { const months = [ ] ; let monthValue = 0 ; for ( let rowIndex = 0 ; rowIndex < this . MAX_ROW ; rowIndex ++ ) { const row = { dateCells : [ ] , trackByIndex : rowIndex } ; for ( let colIndex = 0 ; colIndex < this . MAX_COL ; colIndex ++ ) { const month = this . activeDate . setMonth ( monthValue ) ; const isDisabled = this . disabledDate ? this . disabledDate ( this . activeDate . setMonth ( monthValue ) . nativeDate ) : false ; const content = this . dateHelper . format ( month . nativeDate , 'MMMM' ) ; const cell = { trackByIndex : colIndex , value : month . nativeDate , isDisabled , content , title : content , classMap : null , isSelected : month . isSameMonth ( this . value ) , onClick : ( ) => this . chooseMonth ( cell . value . getMonth ( ) ) , onMouseEnter : ( ) => { } } ; this . addCellProperty ( cell , month ) ; row . dateCells . push ( cell ) ; monthValue ++ ; } months . push ( row ) ; } return months ; } private addCellProperty ( cell , month ) { if ( this . selectedValue ?. length > 0 ) { const [ startSelected , endSelected ] = this . selectedValue ; if ( startSelected ?. isSameMonth ( month ) ) { cell . isSelectedStartDate = true ; cell . isSelected = true ; } if ( endSelected ?. isSameMonth ( month ) ) { cell . isSelectedEndDate = true ; cell . isSelected = true ; } cell . isStartSingle = startSelected && ! endSelected ; cell . isEndSingle = ! startSelected && ! ! endSelected ; cell . isInRange = startSelected ?. isBeforeMonth ( month ) && month ?. isBeforeMonth ( endSelected ) ; } else if ( month . isSameMonth ( this . value ) ) { cell . isSelected = true ; } cell . classMap = this . getClassMap ( cell ) ; } getClassMap ( cell ) { return { [ `${ this . prefixCls }-month-panel-cell` ] : true , [ `${ this . prefixCls }-month-panel-cell-disabled` ] : cell . isDisabled , [ `${ this . prefixCls }-month-panel-selected-cell` ] : cell . isSelected , [ `${ this . prefixCls }-in-range-cell` ] : ! ! cell . isInRange , [ `${ this . prefixCls }-month-panel-current-cell` ] : new TinyDate ( ) . getYear ( ) === this . activeDate . getYear ( ) && cell . value . getMonth ( ) === new TinyDate ( ) . getMonth ( ) } ; } }