import { FunctionProp , TinyDate , valueFunctionProp } from 'ngx-tethys/util' ; import { ChangeDetectionStrategy , Component , EventEmitter , Input , OnChanges , Output } from '@angular/core' ; import { DateHelperService } from '../../date-helper.service' ; import { DateCell , DateBodyRow } from './types' ; import { CalendarTable } from '../calendar/calendar-table.component' ; @ Component ( { changeDetection : ChangeDetectionStrategy . OnPush , selector : 'date-table' , exportAs : 'dateTable' , templateUrl : 'date-table.component.html' } ) export class DateTableComponent extends CalendarTable implements OnChanges { @ Output ( ) readonly dayHover = new EventEmitter < TinyDate > ( ) ; constructor ( private dateHelper ) { super ( ) ; } private chooseDate ( value ) { const newValue = this . activeDate . setYear ( value . getYear ( ) ) . setMonth ( value . getMonth ( ) ) . setDate ( value . getDate ( ) ) ; this . valueChange . emit ( newValue ) ; } makeHeadRow ( ) { const weekDays = [ ] ; const start = this . activeDate . calendarStart ( { weekStartsOn : this . dateHelper . getFirstDayOfWeek ( ) } ) ; for ( let colIndex = 0 ; colIndex < this . MAX_COL ; colIndex ++ ) { const day = start . addDays ( colIndex ) ; weekDays [ colIndex ] = { title : this . dateHelper . format ( day . nativeDate , this . dateHelper . relyOnDatePipe ? 'E' : 'ddd' ) , content : this . dateHelper . format ( day . nativeDate , this . getVeryShortWeekFormat ( ) ) , isSelected : false , isDisabled : false , onClick ( ) { } , onMouseEnter ( ) { } } ; } return weekDays ; } private getVeryShortWeekFormat ( ) { if ( this . dateHelper . relyOnDatePipe ) { return 'EEEEE' ; } return 'dd' ; } makeBodyRows ( ) { const dateRows = [ ] ; const firstDayOfMonth = this . activeDate . calendarStart ( { weekStartsOn : this . dateHelper . getFirstDayOfWeek ( ) } ) ; for ( let week = 0 ; week < this . MAX_ROW ; week ++ ) { const weekStart = firstDayOfMonth . addDays ( week * 7 ) ; const row = { isActive : false , isCurrent : false , dateCells : [ ] , year : weekStart . getYear ( ) } ; for ( let day = 0 ; day < 7 ; day ++ ) { const date = weekStart . addDays ( day ) ; const dateFormat = this . dateHelper . relyOnDatePipe ? 'longDate' : 'YYYY-MM-DD' ; const title = this . dateHelper . format ( date . nativeDate , dateFormat ) ; const label = this . dateHelper . format ( date . nativeDate , this . dateHelper . relyOnDatePipe ? 'dd' : 'DD' ) ; const cell = { value : date . nativeDate , label : label , isSelected : false , isDisabled : false , isToday : false , title : title , dateCellRender : valueFunctionProp ( this . cellRender , date ) , content : `${ date . getDate ( ) }` , onClick : ( ) => this . chooseDate ( date ) , onMouseEnter : ( ) => this . dayHover . emit ( date ) } ; this . addCellProperty ( cell , date ) ; if ( this . showWeek && ! row . weekNum ) { row . weekNum = this . dateHelper . getISOWeek ( date . nativeDate ) ; } if ( date . isToday ( ) ) { cell . isToday = true ; row . isCurrent = true ; } if ( date . isSameDay ( this . value ) ) { row . isActive = date . isSameDay ( this . value ) ; } row . dateCells . push ( cell ) ; } row . classMap = { [ `${ this . prefixCls }-current-week` ] : row . isCurrent , [ `${ this . prefixCls }-active-week` ] : row . isActive } ; dateRows . push ( row ) ; } return dateRows ; } addCellProperty ( cell , date ) { if ( this . selectedValue ?. length > 0 && ! this . showWeek ) { const [ startSelected , endSelected ] = this . selectedValue ; if ( startSelected ?. isSameDay ( date ) ) { cell . isSelected = true ; } if ( endSelected ?. isSameDay ( date ) ) { cell . isSelected = true ; } cell . isStartSingle = startSelected && ! endSelected ; cell . isEndSingle = ! startSelected && ! ! endSelected ; cell . isInRange = startSelected ?. isBeforeDay ( date ) && date . isBeforeDay ( endSelected ) ; } else { cell . isSelected = date . isSameDay ( this . value ) ; } cell . isLastMonthCell = date . isBeforeMonth ( this . activeDate ) ; cell . isNextMonthCell = date . isAfterMonth ( this . activeDate ) ; cell . isToday = date . isToday ( ) ; cell . isDisabled = ! ! this . disabledDate ?. ( date . nativeDate ) ; cell . classMap = this . getClassMap ( cell ) ; } getClassMap ( cell ) { return { [ `${ this . prefixCls }-cell` ] : true , [ `${ this . prefixCls }-today` ] : cell . isToday , [ `${ this . prefixCls }-last-month-cell` ] : cell . isLastMonthCell , [ `${ this . prefixCls }-next-month-btn-day` ] : cell . isNextMonthCell , [ `${ this . prefixCls }-selected-day` ] : cell . isSelected , [ `${ this . prefixCls }-disabled-cell` ] : cell . isDisabled , [ `${ this . prefixCls }-selected-start-date` ] : ! ! cell . isSelectedStartDate , [ `${ this . prefixCls }-selected-end-date` ] : ! ! cell . isSelectedEndDate , [ `${ this . prefixCls }-in-range-cell` ] : ! ! cell . isInRange } ; } }