### File

`src/components/fsdatepickersummary/fsdatepickersummary.component.ts`

### Implements

`OnInit` `OnChanges`

### Metadata

selector | `fsDatePickerSummary`
styleUrls | `fsdatepickersummary.component.scss`
templateUrl | `./fsdatepickersummary.component.html`

### Index

###### Properties
Public formattedEndDate Public formattedStartDate Public fsDatePickerModel
###### Methods
ngOnChanges ngOnInit onComponentsChange
###### Inputs
endDate startDate
###### Outputs
componentsChange

### Constructor

`constructor(fsDatePickerCommon: FsDatePickerCommon, fsDatePickerModel: FsDatePickerModel)`
Parameters :
Name | Type | Optional | Description
fsDatePickerCommon | `FsDatePickerCommon` | no |
fsDatePickerModel | `FsDatePickerModel` | no |

### Inputs

`endDate` | Default value: `null`

`startDate` | Default value: `null`

### Outputs

`componentsChange` | `$event` type: `EventEmitter`

### Methods

ngOnChanges
`ngOnChanges(changes: )`
Parameters :
Name | Type | Optional | Default value | Description
changes |  | no | `` |
Returns : `void`

ngOnInit
`ngOnInit()`
Returns : `void`

onComponentsChange
`onComponentsChange(view: )`
Parameters :
Name | Type | Optional | Default value | Description
view |  | no | `` |
Returns : `void`

### Properties

Public formattedEndDate
`formattedEndDate: `null``
Type : `null`
Default value : `null`

Public formattedStartDate
`formattedStartDate: `null``
Type : `null`
Default value : `null`

Public fsDatePickerModel
`fsDatePickerModel: `FsDatePickerModel``
Type : `FsDatePickerModel`

    <div *ngIf="formattedStartDate || formattedEndDate" class="summary">
      <ng-container *ngIf="formattedStartDate">
        <div
          (click)="onComponentsChange({ calendarStart: true, calendarEnd: true })"
          [ngClass]="{ active: fsDatePickerModel.components.calendarStart }">{{ formattedStartDate.date }}
        </div>
        <div
          (click)="onComponentsChange({ timeStart: true })"
          [ngClass]="{ active: fsDatePickerModel.components.timeStart }">{{ formattedStartDate.time }}
        </div>
      </ng-container>
      <ng-container *ngIf="formattedStartDate && formattedEndDate">&nbsp;-&nbsp;</ng-container>
      <ng-container *ngIf="formattedEndDate">
        <div
          (click)="onComponentsChange({ calendarStart: true, calendarEnd: true })"
          [ngClass]="{ active: fsDatePickerModel.components.calendarEnd }">{{ formattedEndDate.date }}
        </div>
        <div
          (click)="onComponentsChange({ timeEnd: true })"
          [ngClass]="{ active: fsDatePickerModel.components.timeEnd }">{{ formattedEndDate.time }}
        </div>
      </ng-container>
    </div>

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""